W3C的標準的 Box Model
- Element 所占空間
- Element 所佔空間高度 = content 高度 + padding 高度 + border 高度 + margin 高度
- Element 所佔空間寬度 = content 寬度 + padding 寬度 + border 寬度 + margin 寬度
- Element 實際尺寸
- Element 高度 = content 高度 + padding 高度+ border 高度
- Element 寬度 = content 寬度 + padding 寬度+ border 寬度
- 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瀏覽)。
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
