在辨析兩種盒子模型之前，先簡單說明一下什麼叫盒子模型。
原理：
先說說我們在網頁設計中常聽的屬性名：内容(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盒子模型:
- <html>
- <head>
- <title>盒子模型</title>
- <style>
- #box{
- width:100px;
- height:100px;
- padding:40px;
- border:solid 40px green;
- margin:20px;
- }
- div{
- font-size:30px;
- color:red;
- background-color:gray;
- text-align:center;
- }
- </style>
- </head>
- <body>
- <div id="box">
- W3C盒子模型
- </div>
- </body>
- </html>
複制代碼 運作結果:
這張圖隻能看到内容和邊框。看不到具體的分界線，也就不知道填充（padding）和内容（content）具體的排布。
這裡我就順便介紹一中調試工具，firefox浏覽器裡面的firebug，對于平時調試網頁布局各方面的有很大的幫助。
調試界面就是這樣了。滑鼠選中<div>标簽，圖像就發生變化了，整體布局就很清晰了。（如下圖）
這就很清晰了吧。同時也說明了W3C盒子包含了content，padding，border三部分。
IE盒子的就不寫了，有需要的同學可以自己試試。目前大多的網頁布局都是用W3C盒子，它的相容性非常好，是以是不二之選。