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;
}
此时的效果
image.png
看盒模型
image.png
此div的padding和border不会计算入width中
而当 box-sizing为border-box时，
查看盒模型
image.png
会发现，width变小了，
这是因为，box-sizing：borderbox时，div的宽度会把padding和border计算到实际width上；
总结：
content-box ,border和padding不计算入width之内
border-box， border和padding都计算入width内
网友评论