## 介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ #### 相關知識點： （1）有兩種盒子模型：IE盒模型（`border-box`）、W3C標準盒模型（`content-box`） （2）盒模型：分為內容（`content`）、填充（`padding`）、邊界（`margin`）、邊框（`border`）四個部分 IE盒模型和W3C標準盒模型的區別： （1）W3C標準盒模型：屬性`width`，`height`只包含內容`content`，不包含`border`和`padding` （2）IE盒模型：屬性`width`，`height`包含`content`、`border`和`padding`，指的是`content +padding+border`。 在 IE8+ 瀏覽器中使用哪個盒模型可以由`box-sizing`（CSS新增的屬性）控制，默認值為`content-box`，即標準盒模型； 如果將`box-sizing`設為`border-box`則用的是IE盒模型。如果在 IE6/7/8中`DOCTYPE`缺失會將盒子模型解釋為IE 盒子模型。若在頁面中聲明了`DOCTYPE`類型，所有的瀏覽器都會把盒模型解釋為W3C盒模型。 #### 回答： 盒模型都是由四個部分組成的，分別是`margin`、`border`、`padding`和`content`。 標準盒模型和IE盒模型的區別在于設置`width`和`height`時，所對應的范圍不同。標準盒模型的`width`和`height`屬性的 范圍只包含了`content`，而IE盒模型的`width`和`height`屬性的范圍包含了`border`、`padding`和`content`。 一般來說，我們可以通過修改元素的`box-sizing`屬性來改變元素的盒模型。 詳細的資料可以參考： [《CSS 盒模型詳解》](https://juejin.im/post/59ef72f5f265da4320026f76)