什麼是CSS盒模型 IE盒模型和W3C盒模型

1. 什麼是css盒模型

2. ie盒模型和w3c盒模型

3. css3屬性box-sizing

4. 關於盒模型的使用

在最初接觸css的時候，對於css盒模型的不了解，撞了很多次的南牆呀。盒模型是網頁布局的基礎，它制定了元素如何在頁面中顯示，如果足夠地掌握，那使用css布局那將會容易得多。

1. 什麼是css盒模型

盒模型，顧名思義，就是乙個盒子。生活中的盒子，有長寬高，盒子本身也有厚度，可以用來裝東西。頁面上的盒模型我們可以理解為，從盒子頂部俯視所得的乙個平面圖，盒子裡裝的東西，相當於盒模型的內容（content）；東西與盒子之間的空隙，理解為盒模型的內邊距（padding）；盒子本身的厚度，就是盒模型的邊框（border）；盒子外與其他盒子之間的間隔，就是盒子的外邊距（margin）。

元素的外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）就構成了css盒模型。

圖1. 盒模型示意圖

2. ie盒模型和w3c盒模型

css盒模型分為ie盒模型（圖2）和w3c盒模型（圖3）。其實，ie盒模型是怪異模式（quirks mode）下的盒模型，而w3c盒模型是標準模式（standards mode）下的盒模型。

ie6及其更高的版本，還有現在所有標準的瀏覽器都遵循的是w3c盒模型，ie6以下版本的瀏覽器遵循的是ie盒模型。

圖2. ie盒模型

圖3. w3c盒模型

從上圖直觀的可以看出，ie盒模型的寬度或者高度計算方式為：width/height = content + padding + border，w3c盒模型的寬度或者高度計算方式為：width/height = content。

舉乙個簡單的例子：乙個div的寬度和高度為100px，內邊距為10px，邊框為5px，外邊距為30px。圖4為不同模型下顯示的結果，w3c盒模型下顯示的div所佔的總寬度和總高度（包括外邊距、邊框、內邊距、內容）為100 + 10 + 5 + 30 = 145px，ie盒模型下顯示的div所佔的總寬度和總高度（包括外邊距、邊框、內邊距、內容）為100 + 30 = 130px。很明顯的區別，如果元素的寬度（width）一定的情況下，w3c盒模型的寬度（width）不包括內邊距和邊框，ie盒模包括。

**如下：

<

style
>
.content 
.div 
.div-01 
.div-02 
style
>

<

div 
class
="content"
>
<
div 
class
="div div-01"
>div01
div>
<
div 
class
="div div-02"
>div02
div>
div>

圖4. 區別

3. css3屬性box-sizing

如果計算乙個盒子的長寬高，我們一般都是盒子本身的厚度加上盒子裡的空間大小，所在在ie盒模型和w3c盒模型，我們會覺得ie盒模型更符合邏輯。

不同的人有不同的習慣，所以css3新增了乙個屬性box-sizing: content-box | border-box | inherit，預設值為content-box。如果值為content-box，那元素遵循的是w3c盒模型；如果值為border-box，那元素遵循的是ie盒模型；如果值為inherit，該屬性的值應該從父元素繼承。

4. 關於盒模型的使用

有沒有人和我一樣，覺得屬性box-sizing真是個好東西，只需設定所有元素的該屬性為content-box或者border-box，滿足自己的習慣。

雖說現在的瀏覽器都相容該屬性（如上圖），還是得以防萬一，在屬性前最好暫時加-webkit-和-moz-字首。

*

其實，瀏覽器選擇哪個盒模型，主要看瀏覽器處於標準模式（standards mode）還是怪異模式（quirks mode）。我們都記得宣告吧，這是告訴瀏覽器選擇哪個版本的html，後面一般有dtd的宣告，如果有dtd的宣告，瀏覽器就是處於標準模式；如果沒有dtd宣告或者html4一下的dtd宣告，那瀏覽器按照自己的方式解析**，處於怪異模式。

處於標準模式的瀏覽器（ie瀏覽器版本必須是6或者6以上），會選擇w3c盒模型解析**；處於怪異模式的瀏覽器，則會按照自己的方式去解析**，ie6以下則會是選擇ie盒模型，其他現代的瀏覽器都是採用w3c盒模型。

因為ie6以下版本的瀏覽器沒有遵循web標準，不論頁面開頭有沒有dtd宣告，它都是按照ie盒模型解析**的。

標準盒模型和IE盒模型

盒子模型是css中乙個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並...

標準盒模型和 IE 盒模型

盒模型講解 我們今天只會提到 標準盒模型，和 ie 盒模型，兩種盒模型模式講解。首先來看標準盒模型。只要是盒模型都會有這四個屬性 margin,border,padding,content 這四個部分。也就是說乙個基本的盒模型由著四部分組成。樣子如下 這裡要說明的是，為了體現出盒模型的層次感。這裡的...

CSS盒模型（標準模型和IE模型）

css盒模型就是乙個盒子，封裝周圍的html元素，包括border 邊框 padding 內邊距 margin 外邊距 content 實際內容 css盒模型 標準模型和ie模型 標準盒模型 width是內容區的寬度，width會跟隨padding margin，border變化而變化,元素真正的寬...