DIV CSS兩種盒子模型（W3C盒子與IE盒子）

在辨析兩種盒子模型之前。先簡單說明一下什麼叫盒子模型。

原理：先說說我們在網頁設計中常聽的屬性名：

內容(content)、填充(padding)、邊框(border)、邊界(margin)， css盒子模式都具備這些屬性。

這些屬性我們能夠把它轉移到我們日常生活中的盒子（箱子）上來理解。日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。

特點：

每乙個盒子都有：邊界、邊框、填充、內容四個屬性。

每乙個屬性都包含四個部分：上、右、下、左。這四部分可同一時候設定。也可分別設定；裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又能夠理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的。邊界就是該盒子與其他東西要保留多大距離。（

以下這幅圖裡面，各自是w3c盒子和ie盒子的模型：

大家肯定都能發現。這兩種模型總體來說很的相似。由內到外都是content,padding,border,margin。

可是細緻看的話，虛線延長出來的部分，分別標註了height和width，可是在w3c中，虛線包圍的部分僅僅有content。而在ie中，虛線包圍的部分是content+padding+border。

這是最直觀的不同。同一時候這也就是這兩種模型的最大不同點。

w3c 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包括其它部分

ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包括了 border 和 padding

用乙個樣例來實現一下w3c盒子模型:

w3c盒子模型

執行結果:

這張圖僅僅能看到內容和邊框。看不到詳細的分界線，也就不知道填充（padding）和內容（content）詳細的排布。

這裡我就順便介紹一中除錯工具，firefox瀏覽器裡面的firebug，對於平時除錯網頁布局各方面的有非常大的幫助。

除錯介面就是這樣了。滑鼠選中標籤，影象就發生變化了。總體布局就非常清晰了。

（例如以下圖）

這就非常清晰了吧。同一時候也說明了w3c盒子包括了content，padding，border三部分。

ie盒子的就不寫了，有須要的同學能夠自己試試。眼下大多的網頁布局都是用w3c盒子，它的相容性很好。所以是不二之選。