來源 | https://juejin.im/post/59ef72f5f265da4320026f76
CSS的盒模型是CSS的基礎，同時也是難點，這個問題經常在面試中會被問到，屬於經典問題了。很多博客裡講得也很模糊不清，於是，我在這裡重新整理一下。
可以認為每個html標籤都是一個方塊，然後這個方塊又包著幾個小方塊，如同盒子一層層的包裹著，這就是所謂的盒模型。
盒模型分為IE盒模型和W3C標準盒模型。
IE盒模型和W3C標準盒模型的區別是什麼？
1. W3C 標準盒模型：
屬性width,height只包含內容content，不包含border和padding。
2. IE 盒模型：
屬性width,height包含border和padding，指的是content+padding+border。
在ie8+瀏覽器中使用哪個盒模型可以由box-sizing(CSS新增的屬性)控制，默認值為content-box，即標準盒模型；如果將box-sizing設為border-box則用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失會觸發IE模式。在當前W3C標準中盒模型是可以通過box-sizing自由的進行切換的。
content-box（標準盒模型）
width = 內容的寬度
height = 內容的高度
border-box（IE盒模型）
width = border + padding + 內容的寬度
height = border + padding + 內容的高度
谷歌瀏覽器，按下F12，然後把右邊欄的滾動條拉到最下面你就會看到一個東西：
通過代碼來對其進行理解，更直觀，如下
<code>.box{ width:200px; height:200px; background-color:pink;}/<code> 此時，盒子大小就是content的大小。
<code>.box{ width:200px; height:200px; background-color:pink; padding:20px;}/<code>
此時，盒子的長寬變成了240x240，顯然，padding是能夠改變盒子的大小的，這時盒子大小就等於content+padding。
<code>.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black;}/<code>
此時，盒子的長寬變成了260x260，所以這時盒子大小就等於content+padding+border。
<code>.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black; margin-bottom:10px;}.box1{ width: 100px; height: 100px; background: green;}/<code>效果圖如下：
此時，盒子的長寬仍為260x260，即盒子的大小並未發生變化。
可以看到，盒子的底部產生了10px的空白。
所以說，盒子的大小為content+padding+border即內容的(width)+內邊距的再加上邊框，而不加上margin。
很多時候，我們會錯誤地把margin算入，若那樣的話，上面這種情形盒子的大小應該是260x270，但實際情況並不是這樣的。
css的盒模型由content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)組成。但盒子的大小由content+padding+border這幾部分決定， 把margin算進去的那是盒子佔據的位置，而不是盒子的大小！
我們可以試著給上面的粉色方塊設置box-sizing屬性為border-box發現，會發現：無論我們怎麼改border和padding盒子大小始終是定義的width和height。如下
<code>.box{ width:200px; height:200px; background-color:pink; box-sizing:border-box; padding:20px;}/<code>
我們在編寫頁面代碼時應儘量使用標準的W3C模型(需在頁面中聲明DOCTYPE類型)，這樣可以避免多個瀏覽器對同一頁面的不兼容。
因為若不聲明DOCTYPE類型，IE瀏覽器會將盒子模型解釋為IE盒子模型，FireFox等會將其解釋為W3C盒子模型；若在頁面中聲明瞭DOCTYPE類型，所有的瀏覽器都會把盒模型解釋為W3C盒模型。
分享到:
閱讀更多 牛旦教育IT課堂 的文章
