CSS3乾貨21：box-sizing

開學了好忙，都沒時間整理自己的東西。

眼看月底了。發點自己的課堂筆記充個數~

總所周知，盒子模型標準屬性都要佔位。也就是 padding、border、margin 會改變標籤的實際所佔的寬、高。

即，標籤的實際寬高應該是：

width / height  + padding + border + margin 

如：

.box{
    width: 200px;
    height: 200px;
    background: #f00;
    padding:30px;
    border:5px #000 dotted ;
    margin-left:40px;
}

程式碼中的 .box 實際寬度為：310px。

 width + padding-left和right +  border-left和right + margin-left 
 200 +   30*2  +  5*2 + 40  = 310

可以設定標籤的 box-sizing（盒子尺寸屬性） 改變這個設定。

box-sizing : content-box  |  border-box ;

值	描述
content-box	預設值。在 width 和 height 之外繪製元素的 padding 和 border。 即，padding 和 border 不佔用 width、height 的值。
border-box	為元素設定的 width 和 height 決定了標籤的邊界。 即，padding 和 border 共用 width、height 的值。

.box{
    width: 200px;
    height: 200px;
    background: #f00;
    padding:30px;
    border:5px #000 dotted ;
    margin-left:40px;
    
    box-sizing: border-box;
}

 程式碼中的 .box 實際寬度為：240px。 padding 和 border 的值包含在了 width 的 200px 裡。

 width + margin-left 
 200 +  40  = 240

box-sizing 的值無論是 content-box 還是 border-box，專案中的所有標籤都應該統一標準。

*{
     border-sizing: border-box;
}

以上這個程式碼，在同一個專案中，要麼寫，要麼就不寫。

部分主流框架或網站很喜歡寫這個。比如， bootstrap，CSDN。