<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postion</title>
<style>
.box1{
width:200px;
height:200px;
background: greenyellow;
/*设置边框*/
border:3px red solid;
/*设置内边距*/
padding: 20px;
/*
*外边距margin：指的是当前的盒子与其他盒子之间的距离
* 它不会影响盒子课可见框的大小，而是会影响盒子的位置
*特性：
* 1. 4个方向
* margin-top:
margin-right:
margin-bottom:
margin-left:
2.由于页面中的元素都是靠左靠上位置摆放的
所以注意：当我们设置上和左外边距时，会导致盒子自身位置的发生改变
当我们设置下和右外边距时，会改变其他盒子的位置
3.可以设置 负值，负值——反方向移动
4.可以设置auto（自动）
一般只设置给水平方向，居中显示
原因：
只指定：
1）水平方向为auto——————最大值
2）垂直方向为auto——————0
5.margin
*/
/*margin-top:-100px;
margin-right: 100px;
margin-bottom: 100px;*/
margin: 0 auto;/*水平居中*/
}
.box3{
width:200px;
height:200px;
background: blue;
}
/*创建一个子元素box2来占满box1*/
.box2{
height:100px;
width:100px;
background: yellow;
margin-left: 120px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">我是box2</div>
</div>
<div class="box3">我是box3</div>
</body>
</html>
盒模型——外边距
猜你喜欢
转载自www.cnblogs.com/goodgirl----xiaomei/p/9782374.html
今日推荐
周排行