在CSS中所謂「標準的盒模型」有幾種，IE早期的盒模型是標準盒模型嗎？

01-14

最近被詢問到這樣的題目。以我的理解以及相關的書籍或資料，都說IE早期的盒模型不遵循標準的盒模型（相信或有存在誤導或個人理解錯誤），所謂」不遵循「是指width不是等於content部分，而是等於content+padding+border的做法。而提出者給我的回答是IE的也是標準盒模型之一，標準盒模型有三種，依據是box-sizing的值，content-box | padding-box | border-box，那真正的標準盒模型是哪一種說法呢？。

IE：我覺得盒模型應該是這樣的，blahblah。

W3C：明顯應該是這樣的才對，blahblah。

結果是 IE 在怪異模式下用了「不標準」的盒模型，標準模式下用了「標準」的盒模型。

圍觀群眾：聽說 IE 的盒模型不標準。

……多年過去……

W3C：感覺還是 IE 的那個模型比較好。但我們已經回不去了……算了加個屬性支持一下 IE 那種模式吧。

`box-sizing` 這貨就是用來擦屁股的，我從來沒見過有人用 `padding-box` 的……

CSS中Box model是分為兩種，第一種是W3C的標準模型，另一種是IE的傳統模型,具體來說，W3C的是element = content + padding + border+margin ;IE是是element = content+margin .W3C標準瀏覽器的內盒寬度等於IE6以下版本瀏覽器的外盒寬度

在實際設計中，我們會發現，IE 盒模型更容易進行控制，我們一般先將整個容器的尺寸先確定，然後再填充具體的內容，通過 padding 來調整內容的具體位置，通過 margin 來調整容器與其他元素之間的間隙，無論如何調整，整個容器的結構是固定的，不會改變的；而在標準盒模型中，我們在調整 padding 和 margin 的同時，往往會將容器本身的結構打亂，需要重新設置內容 content 的尺寸
所以我一般都會在樣式重置中添加 CSS 3 屬性：box-sizing: border-box; 可以讓元素按照 IE 盒模型進行解析，即設置的寬高包括了 border 以及 padding 的值

關於更多 W3C 標準盒模型和 IE 盒模型的區別，歡迎查看我的博文：CSS 布局_1 Border盒模型