css中， box model叫盒子模型（或框模型），box model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在html文件中，每個元素（element）都有盒子模型，所以說在web世界裡（特別是頁面布局），box model無處不在。以firefox標準盒子模型為例：
w3c標準盒子模型
說明：上圖中，由內而外依次是元素內容（content）、內邊矩（padding-top、padding-right、padding-bottom、padding-left）、邊框（border-top、border-right、border-bottom、border-left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。
注意：
- 內邊距、邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
元素的背景應用於由內容和內邊距、邊框組成的區域。
/*設定所有元素的外邊距和內邊矩為0*/
*
#box
ie盒子模型：
ie 盒子模型的範圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
為了讓網頁能相容各個瀏覽器，在頁面頭部加上dtd，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋，網頁就能在各個瀏覽器中顯示一致了。
瀏覽器相容性
一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
術語翻譯
css 標準盒子模型和IE盒子模型
利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS標準盒子模型和IE怪異盒子模型
css中的盒子模型 box model 分為兩種 w3c標準盒子模型和ie標準盒子模型。大多數的瀏覽器都採用w3c標準，而ie採用的是ie標準。而怪異模式是指 部分瀏覽器在支援w3c標準的同時還保留了原先的解析模式 怪異模式主要表現在ie核心的瀏覽器中。通過對比來分析標準模式和怪異模式對於塊大小的定...