box-sizing 一个小例子搞懂它

.box1,.box2,.box3{ border:10px solid #0C3; padding:10px; width:190px; height:190px;}
.box1{ box-sizing:border-box;}
.box2{ box-sizing:content-box;}

<div class="box1">box-sizing:border-box  宽和高190含border和padding，实测占空间190X190 </div>
<br/>
<div class="box2">box-sizing:content-box 宽和高190不含border和padding，仅指content，实测占空间 230X230, 190+左右边20+左右间距20=230</div>
<br/>
<div class="box3">没设置box-sizing</div>

这个给实际项目带来什么好处？

举一个应用场景的例子，若是你有2个div ，宽度须要平均占满屏，你第一步确定是float：left；width：50%；

OK！这是对的！巴特！but，但是，但是，若是你这2个div有了border或者padding，那么，你的每一个div的实际宽度50%须要再加上border和padding，结果就是，这2个div没法在一行了。（固然，这里能够用js来算，能够达到在一行的最终效果。这里暂不讨论js的事情。）
 

这个时候，你若是 box-sizing : border-box，就完美解决了！

代码以下：

.box{ float:left; border:10px solid #0C3; padding:10px; width:50%; height:100px; box-sizing:border-box;}

<div class="box">1</div>
<div class="box">2</div>