[css] box model and box-sizing memo

  今天來討論入門討論 box-sizing這個css3的一個屬性，但是在知道box-sizing之前我們必須先知道什麼是 box model，這個目前在前端界很重要的概念。

  W3C的標準的 Box Model

• Element 所占空間
• Element 所佔空間高度 = content 高度 + padding 高度 + border 高度 + margin 高度
• Element 所佔空間寬度 = content 寬度 + padding 寬度 + border 寬度 + margin 寬度

• Element 實際尺寸
• Element 高度 =  content 高度 + padding 高度+ border  高度
• Element 寬度 =  content 寬度 + padding 寬度+ border  寬度

  IE6有特別的算法

• Element 所占空間
• Element 所佔空間高度 = content 高度  + margin 高度
• Element 所佔空間寬度 = content 寬度  + margin 寬度

• Element 實際尺寸
• Element 高度 =  content 高度 (包含了 content，padding，以及 border)
• Element 寬度 =  content 寬度 (包含了 content，padding，以及 border)

  我繪製了圖片，很清楚說明兩者差異如下。

    Box-Sizing

  接下來進入主題，介紹 box-sizing，他有三種屬性:  content-box，padding-box，以及 border-box。從下面的實際範例很容易可以看的出來三者的差異(感謝 Kuro提供，建議使用 Firefox瀏覽)。

Check out this Pen!

div{
    border: 10px solid #000;
    width: 50px;
    height: 50px;
    padding:10px;
    margin:10px 0;
    background-color: #fff;
}
.content-box {
  /*width = content width+padding+border*/
  /*width = 50+20+20 = 90 */
}
.padding-box {
  /*content width only 30 + padding(20) = 50*/
  /*width = 50+20= 70*/
  margin-left: 10px;
}
.border-box {
  /*content width only 10 + padding(20) + border(20) = 50*/
  /*width = 50*/
 margin-left: 20px
}
.content-box{ 
  -moz-box-sizing: content-box; 
  -webkit-box-sizing: content-box; 
}
.padding-box{ 
  -moz-box-sizing: padding-box; 
  -webkit-box-sizing: padding-box; 
}
.border-box{ 
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box; 
}Check out this Pen!

 
  通常元素預設為 content-box，此為保留 W3C的標準 Box Model的行為，其寬高的設定，即是內容的寬高，而元件的寬高則是再加上 padding以及 border。
 
  border-box則是會把元素的寬高計算包括 padding以及 border，所以上例設定寬度為 50px，實際上 padding左右佔掉 20px， border左右占掉20px，實際內容寬只有10px，，根據 Kuro提醒 Chrome的 input type="search" 預設為 box-sizing: border-box。

  而 padding-box則是其寬高的設定會把padding算進去，而不算border，所以設定寬度為50px，padding左右佔掉 20px實際內容寬度就只有30px了。



參考資料: Mozilla Developer Network: box-sizing