盒模型
一般情况下,给固定宽高的div加上padding值时盒子的实际宽 度为
(width)+(padding-left)+(padding-right)
实际高度为
(height)+(padding-top)+(padding-bottom)
为使盒子里的paddding值不会影响到盒子高度和宽度,可使用box-sizing: border-box;不论padding如何改变,div实际的宽和高都是样式里的width和height值,不需要程序员码代码时自己计算。
<div class="box">
</div>
这种情况下box实际宽高为120px
.box{
width:100px;
height:100px;
padding:20px;
}
这种情况下box的宽高将保持100px
.box{
width:100px;
height:100px;
padding:20px;
box-sizing: border-box;
}
div居中
<div class="mid">
</div>
.mid{
width: 500px;
height: 500px;
position: absolute; //使用定位
top: 50%;
left: 50%;
margin-top: -250px; //margin-top为height一半的负数
margin-left: -250px; //margin-left为width一半的负数
background: red;
}
网友评论