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盒模型。