1、盒子型簡介
在HTML文檔中任何元素，都可以看作是一個盒子，是以了解盒子模型非常重要。一個盒子包含 盒子的内容、盒子内邊距、盒子的邊框、盒子的外邊距。
image.png
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
2、浏覽器相容性
W3C 的規範，元素内容占據的空間是由 width 屬性設定的，而内容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非标準模型。這些浏覽器的 width 屬性不是内容的寬度，而是内容、内邊距和邊框的寬度的總和。
IE8 及更早IE版本不支援 填充的寬度和邊框的寬度屬性設。
解決IE8及更早版本不相容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。
3、内聯元素與塊元素
div、h1 或 p 元素常常被稱為塊級元素。這意味着這些元素顯示為一塊内容，即“塊框”。與之相反，span 和 strong 等元素稱為“行内元素”，這是因為它們的内容顯示在行中，即“行内框”。如果讓行内元素變成塊元素，通過将 display 屬性設定為 block。還可以通過把 display 設定為 none，隐藏元素，不在文檔流中占據空間。
4、CSS3 box-sizing
屬性值content-box
width=内容區寬度
height=内容區高度
.test1{
box-sizing:content-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
屬性值border-box
width=内容寬度+左填充+右填充+左邊框+右邊框
height=高度+頂部填充+底部填充+上邊框+下邊框
.test2{
box-sizing:border-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)