box-sizing属性值有2个,border-box 和 content-box,
实例:
//html
<div class="content-box">
</div>
//css
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
此时的效果
看盒模型
此div的padding和border不会计算入width中
而当 box-sizing为border-box时,
查看盒模型
会发现,width变小了,
这是因为,box-sizing:borderbox时,div的宽度会把padding和border计算到实际width上;
总结:
content-box ,border和padding不计算入width之内
border-box, border和padding都计算入width内