一、标准盒子模型
每个标签都类似于盒子有内边距和外边距
1.内边距设置
padding-left:10px; | 左边的边距 |
padding-right:10px; | 右边的边距 |
padding-top:10px; | 上面的边距 |
padding-bottom:10px; | 下面的边距 |
简写:padding:10px;上下左右都是10px;
padding:10px 20px;第一个值是上下的边距,第二个值是左右的边距;
padding:10px 20px 30px;第一个值是上面的边距,第二个值是左右的边距,第三个值是下面的边距
padding:10px 20px 30px 40px;第一个值是上面的边距,第二个值是右面的边距,第三个值是下面的边距,第四个值是左边的边距,呈顺时针方向
2.外边距设置
margin-top:10px | 上面外边距为10 |
margin-bottom:20px | 下面外边距为20 |
margin-left:30px | 左边外边距为30 |
margin-right:40px | 右面外边距为40 |
简写:margin:10px;上下左右都是10px;
margin:10px 20px;第一个值是上下的边距,第二个值是左右的边距;
margin:10px 20px 30px;第一个值是上面的边距,第二个值是左右的边距,第三个值是下面的边距
margin:10px 20px 30px 40px;第一个值是上面的边距,第二个值是右面的边距,第三个值是下面的边距,第四个值是左边的边距,呈顺时针方向
注意:外边距自带的一些bug
两个盒子之间的距离是外边距,但他们之间的距离不是相加的;
例如:
正常逻辑是第一个盒子和第二个盒子距离应该是30px,但是它们实际距离是30px
这就是外边距之间的bug,两个盒子的上下边距,之间的距离按最大的一个算。
同样,盒子里面套小盒子也是这样算的。
这块希望大家多多注意,只有上下外边距是这样的,左右外边距是正常逻辑。
<style>
.box{
margin-bottom:30px;
}
.box1{
margin-top:20px;
}
</style>
<body>
<div class="box">第一个盒子</div>
<div class="box1">第二个盒子</div>
</body>
解决办法:
给上下盒子做溢出处理,就能实现正常逻辑的算法。
给盒子套个父盒子,做溢出处理。
<style>
.boxfa{
overflow:hidden;
}
.box2fa{
overflow:hidden;
}
.box{
margin-bottom:30px;
}
.box2{
margin-top:30px;
}
</style>
</head>
<body>
<div class="boxfa">
<div class="box">hello</div>
</div>
<div class="box2fa">
<div class="box2">world</div>
</div>
</body>
</html>
二、块元素居中
margin:0 auto;:实现块元素的居中
当行高等于块元素的值时,可以实现文本上下的居中。
<style>
.context{
width:1000px;
height:100px;
background-color:#008000;
text-align:center;
line-height:100px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="context">
托马斯家的
</div>
</body>