CSS盒模型詳解

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，然後把右邊欄的滾動條拉到最下面你就會看到一個東西：

通過程式碼來對其進行理解，更直觀，如下

.box{
        width:200px;
        height:200px;
        background-color:pink;
}複製程式碼

此時，盒子大小就是content的大小。

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
}複製程式碼

此時，盒子的長寬變成了240x240，顯然，padding是能夠改變盒子的大小的，這時盒子大小就等於content+padding。

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
        border:10px solid black;
}複製程式碼

此時，盒子的長寬變成了260x260，所以這時盒子大小就等於content+padding+border。

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
        border:10px solid black;
        margin-bottom:10px;
}
.box1{
        width: 100px;
        height: 100px;
        background: green;
}複製程式碼

效果圖如下：

此時，盒子的長寬仍為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。如下

.box{
        width:200px;
        height:200px;
        background-color:pink;
        box-sizing:border-box;
        padding:20px;
}複製程式碼

我們在編寫頁面程式碼時應儘量使用標準的W3C模型(需在頁面中宣告DOCTYPE型別)，這樣可以避免多個瀏覽器對同一頁面的不相容。

因為若不宣告DOCTYPE型別，IE瀏覽器會將盒子模型解釋為IE盒子模型，FireFox等會將其解釋為W3C盒子模型；若在頁面中宣告瞭DOCTYPE型別，所有的瀏覽器都會把盒模型解釋為W3C盒模型。