盒子模型（box model）是 css 的核心，現代 web 布局設計簡單說就是一堆盒子的排列與巢狀，掌握了盒子模型與它們的擺放控制，會發現再複雜的頁面也不過如此。
然而，任何美好的事物都有缺憾，盒子模型有兩種不同的詮釋，一種來自 ie6，一種來自w3c 標準瀏覽器。
盒子模型
下圖就是乙個典型的盒子模型示意圖
在內容區外面，依次圍繞著 padding 區，border 區，margin 區，這一模型結構在所有主流瀏覽器都是一致的。
通過盒子模型，我們可以為我們的內容設定邊界，留白以及邊距，盒子模型最典型的應用是這樣：
我們有一段內容，可以為這段內容設定乙個邊框，為了讓內容不至於緊挨著邊框，可以設定 padding ，為了讓這個盒子不至於和別的盒子靠得太緊，可以設定 margin。
到目前為止，一切都很完美，直到當我們想為這個盒子設定乙個尺寸的時候。
ie6 和 w3c 標準瀏覽器對盒子模型的不同詮釋
當我們試圖為乙個盒子設定尺寸的時候，問題出現了。ie6 和 w3c 標準瀏覽器對盒子模型有不同的解釋，這個不同解釋表現在盒子的尺寸上，下圖是兩種型別的瀏覽器對盒子尺寸的不同解釋示意圖：
可以看出，ie6盒子模型中，盒子的尺寸包含了 內容區，padding， border 和 margin 這四個部分，
而 w3c 的盒子模型中，盒子的尺寸只包含內容區，padding，border 和 margin 被排除在盒子尺寸之外。
為什麼 ie6 的盒子模型更合理
在現實世界中，我們描述乙個物理盒子的時候，如果談到尺寸，是不會只計算其盛放的物體的尺寸的，我們還會算上空隙與盒體本身。
拿貨櫃裝箱為例，我們有 100 只花瓶，每只花瓶用1個紙盒包裝，為了防止花瓶破碎，我們在花瓶周圍塞上泡沫，這相當於 padding，紙盒的外圍紙板相當於 border，在裝貨櫃的時候，為了防止紙盒之間相互碰撞，紙盒之間塞上稻草，這相當於 margin，很顯然，我們向貨運公司報告我們貨物尺寸的時候，是要將整個紙盒的尺寸，連同紙盒之間需要塞稻草的空隙都告訴他們的，倘若只報告花瓶的尺寸，貨運公司是沒有辦法裝箱的。
再舉乙個例子，假若我們有一面牆，要在上面掛10幅油畫，油畫是用相框裱糊的，相框的邊框相當於 border，油畫和邊框之間的距離相當於 padding，相框之間的間隔相當於 margin，這個例子和 web 布局設計已經很接近了，對任何人來說，使用 ie6 的盒子模型，將整個相框，包括油畫當做乙個整體更容易布局，當你知道了整個相框的尺寸後，不必再去考慮 padding, border, margin 這個因素的影響，每個相框就是乙個整體，至於 padding, border 與 margin，這是瀏覽器自己事，不需要設計者去關心。
在具體的 web 設計中
在具體 web 設計中，尤其牽扯到複雜網格布局的時候，ie6 的盒子模型更容易控制，我們不妨看看以下幾個設計場景。
1. 面板式介面設計
頁面上包含幾個面板，比如乙個登入面板，乙個最新新聞面板，乙個投票面板，這類設計典型的做法是，用背景圖的方式，首先逐個設計出這些面板的外觀圖，將需要用具體內容替換的地方空著，這些面板，無非就是一些使用面板外觀做背景圖的盒子，然後，在這些盒子裡面，放上具體的內容，使用 padding 控制內容的擺放位置，使用 margin 調整面板本身的擺放位置，由於面板的尺寸是固定的，我們依此確立了盒子的尺寸之後，就無需再關心尺寸問題，然後，不論你怎樣調整 padding 和 margin，都不會影響面板本身的結構。這是 ie6盒子模型。
而在 w3c 的盒子模型中，調整 padding 和 margin ，都會影響盒子的尺寸，你在調整內容擺放位置的同時，極有可能打亂面板本身的結構。
2. 百分比級尺寸 + 畫素級邊界問題
w3c盒子模型在設計中最讓人頭疼的是，假如你有乙個不確定寬度的容器，想在裡面放置兩個同樣大小的盒子，最合理的的做法當時是設定每個盒子的寬度為 50%，這樣，不
管你的容器寬度為多大，這兩個盒子總能自動適應這個寬度，然而，前提是你不要設定任何 padding 或 border，而，現實中，為了防止兩個盒子中的內容互相挨得太近，你肯定要設定 padding，一旦設定了 padding，就會發現你的容器被撐破了。
當然你會說，每個盒子的寬度不要設為 50%，可以設為 45%，然後為每個盒子再加乙個 5% 的 padding，這是乙個解決辦法，但我們在設計中經常有這樣的習慣，雖然一段內容的寬度可能不確定，但我們總喜歡它擁有固定 padding，我們並不希望 padding 自動適應，況且，在很多時候，我們希望為乙個自適應寬度的盒子，設定乙個1 畫素的 border，在這種情形，w3c盒子模型將陷入困境。
而遇到這種情形，ie6盒子模型不需要任何周折，你只管將每個盒子的寬度設定為 50%，它們會自動適應容器的寬度，然後，不管你你怎樣設定 padding 和 border，都不會撐破你的容器。
w3c 在盒子模型上迷途知返
雖然 w3c 永遠都不會承認，但他們顯然意識到了這個問題，重新定義盒子模型是不可能了，所以，在 css3 中，我們看到了下面這個屬性：
box-sizing
box-sizing 有兩個可選值，乙個是預設的 content-box 乙個是 border-box，選用後者，盒子模型將按 ie6 的方式進行處理。
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...