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>