盒子模型（Box Model）是CSS 的核心，現(xiàn)代Web 佈局設(shè)計(jì)簡單說就是一堆盒子的排列與嵌套，掌握了盒子模型與它們的擺放控制，會(huì)發(fā)現(xiàn)再複雜的頁面也不過如此，然而，任何美好的事物都有缺失，盒子模型有兩種不同的詮釋，一種來自IE6，一種來自W3C 標(biāo)準(zhǔn)瀏覽器

在內(nèi)容區(qū)外面，依序圍繞著padding 區(qū)，border 區(qū)，margin 區(qū)，這個(gè)模型結(jié)構(gòu)在所有主流瀏覽器都是一致的。透過盒子模型，我們可以為我們的內(nèi)容設(shè)定邊界，留白以及邊距，盒子模型最典型的應(yīng)用是這樣：我們有一段內(nèi)容，可以為這段內(nèi)容設(shè)置一個(gè)邊框，為了讓內(nèi)容不至於緊挨著邊框，可以設(shè)定padding ，為了讓這個(gè)盒子不至於和別的盒子靠得太緊，可以設(shè)定margin。

到目前為止，一切都很完美，直到當(dāng)我們想為這個(gè)盒子設(shè)定一個(gè)尺寸的時(shí)候

#IE6 和W3C 標(biāo)準(zhǔn)瀏覽器對盒子模型的不同詮釋

當(dāng)我們試圖為一個(gè)盒子設(shè)定尺寸的時(shí)候，問題出現(xiàn)了。 IE6 和W3C 標(biāo)準(zhǔn)瀏覽器對盒子模型有不同的解釋，這個(gè)不同解釋表現(xiàn)在盒子的尺寸上，下圖是兩種類型的瀏覽器對盒子尺寸的不同解釋示意圖

可以看出，IE6 盒子模型中，盒子的尺寸包含了內(nèi)容區(qū)，padding， border 和margin 這四個(gè)部分，而W3C 的盒子模型中，盒子的尺寸只包含內(nèi)容區(qū)， padding，border 和margin 被排除在盒子尺寸之外。

為什麼 IE6 的盒子模型比較合理

在現(xiàn)實(shí)世界中，我們描述一個(gè)實(shí)體盒子的時(shí)候，如果談到尺寸，是不會(huì)只計(jì)算其盛放的物體的尺寸的，我們還會(huì)算上空隙與盒體本身。以貨櫃裝箱為例，我們有100 隻花瓶，每隻花瓶都用1個(gè)紙盒包裝，為了防止花瓶破碎，我們在花瓶周圍塞上泡沫，這相當(dāng)於padding，紙盒的外圍紙板相當(dāng)於border，在裝貨櫃的時(shí)候，為了防止紙盒之間相互碰撞，紙盒之間塞上稻草，這相當(dāng)於margin，很顯然，我們向貨運(yùn)公司報(bào)告我們貨物尺寸的時(shí)候，是要將整個(gè)紙盒的尺寸，連同紙盒之間需要塞稻草的空隙都告訴他們的，倘若只報(bào)告花瓶的尺寸，貨運(yùn)公司是沒有辦法裝箱的。

再舉一個(gè)例子，假若我們有一面牆，要在上面掛10幅油畫，油畫是用相框裱糊的，相框的邊框相當(dāng)於border，油畫和邊框之間的距離相當(dāng)於padding，相框之間的間隔相當(dāng)於margin，這個(gè)例子和Web 佈局設(shè)計(jì)已經(jīng)很接近了，對任何人來說，使用IE6 的盒子模型，將整個(gè)相框，包括油畫當(dāng)做一個(gè)整體更容易佈局，當(dāng)你知道了整個(gè)相框的尺寸後，不必再去考慮padding, border, margin 這個(gè)因素的影響，每個(gè)相框就是一個(gè)整體，至於padding, border 與margin，這是瀏覽器自己事，不需要設(shè)計(jì)者去關(guān)心。

在具體的Web 設(shè)計(jì)中

在具體Web 設(shè)計(jì)中，尤其牽扯到複雜網(wǎng)格佈局的時(shí)候，IE6 的盒子模型更容易控制，我們不妨看看以下幾個(gè)設(shè)計(jì)場景。

1.? 面板式介面設(shè)計(jì)

頁面上包含幾個(gè)面板，例如一個(gè)登入面板，一個(gè)最新新聞面板，一個(gè)投票面板，這類設(shè)計(jì)典型的做法是，用背景圖的方式，先逐一設(shè)計(jì)出這些面板的外觀圖，將需要用具體內(nèi)容替換的地方空著，這些面板，無非就是一些使用面板外觀圖片做背景圖的盒子，然後，在這些盒子裡面，放上具體的內(nèi)容，使用padding 控制內(nèi)容的擺放位置，使用margin 調(diào)整面板本身的擺放位置，由於面板的尺寸是固定的，我們依此確立了盒子的尺寸之後，就無需再關(guān)心尺??寸問題，然後，不論你怎麼調(diào)整padding 和margin，都不會(huì)影響面板本身的結(jié)構(gòu)。這是 IE6 盒子模型。

而在 W3C 的盒子模型中，調(diào)整 padding 和 margin ，都會(huì)影響盒子的尺寸，你在調(diào)整內(nèi)容擺放位置的同時(shí)，極有可能打亂面板本身的結(jié)構(gòu)。

2. 百分比級尺寸 + 像素級邊界問題

W3C 盒子模型在設(shè)計(jì)中最讓人頭疼的是，假如你有一個(gè)不確定寬度的容器，想在裡面放置兩個(gè)同樣大小的盒子，最合理的的做法當(dāng)時(shí)是設(shè)置每個(gè)盒子的寬度為50%，這樣，不管你的容器寬度為多大，這兩個(gè)盒子總是能自動(dòng)適應(yīng)這個(gè)寬度，然而，前提是你不要設(shè)定任何padding 或border，而，現(xiàn)實(shí)中，為了防止兩個(gè)盒子中的內(nèi)容互相挨得太近，你一定要設(shè)定padding，一旦設(shè)定了padding，你會(huì)發(fā)現(xiàn)你的容器被撐破了。

當(dāng)然你會(huì)說，每個(gè)盒子的寬度不要設(shè)為50%，可以設(shè)為45%，然後為每個(gè)盒子再加一個(gè)5% 的padding，這是一個(gè)解決辦法，但我們在設(shè)計(jì)中常有這樣的習(xí)慣，雖然一段內(nèi)容的寬度可能不確定，但我們總喜歡它擁有固定padding，我們並不希望padding 自動(dòng)適應(yīng)，況且，在很多時(shí)候，我們希望為一個(gè)自適應(yīng)寬度的盒子，設(shè)定一個(gè)1 像素的border，在這種情形，W3C 盒子模型將陷入困境。

而遇到這種情形，IE6 盒子模型不需要任何周折，你只管將每個(gè)盒子的寬度設(shè)置為50%，它們會(huì)自動(dòng)適應(yīng)容器的寬度，然後，不管你你怎麼設(shè)置padding和border，都不會(huì)撐破你的容器。