传统盒子模型:
<div class="box“></div>
.box{width:300px; border:3px solid #FFFFFF;}
此时该盒子总宽度:width=300+3+3=306px;
当使用box-sizing属性时:
<div class="box“></div>
.box{width:300px; border:3px solid #FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
此时盒子总宽度width=300px
此元素的内边距和边框不再会增加它的宽度