本文章適合初級網(wǎng)站制作的web設(shè)計朋友，讓你對盒子模型有更近一步的理解。建議閱讀這篇文章之前你應(yīng)該對盒子模型html等基礎(chǔ)知識是有一定的了解，否則會讓你更加云里霧里。本文章更多的是教你在實戰(zhàn)過程中如何自如的控制盒子的寬度，如何用最恰當(dāng)?shù)姆椒ǘㄎ缓凶?，如何解決IE中盒子的種種bug，不會像很多的中文教程那樣，把盒子模型內(nèi)邊距，外邊距，如何定位等概念有條不紊的介紹一遍。

之所以翻譯這篇外國文章，是因為青島網(wǎng)站建設(shè)的程序員在學(xué)習(xí)的過程中也發(fā)現(xiàn)，國外的教程和過內(nèi)的相比，它們授人以漁，更授人以魚 。不同于國內(nèi)教程有章有節(jié)有點有條目，他們的敘述方式更接近談話式的由淺入深……總而言之，目的在于給更多的初學(xué)者提供一點啟示和幫助，不必像我一樣走了許多彎路。

深入理解CSS盒子模型（The CSS Box Model）

如果你了解盒子模型（box model）的概念，了解它是如何決定某一個元素的最終尺寸的話，會有助你理解一個元素如何在網(wǎng)頁上定位的。盒子模型主要適用于塊級元素。順便提一個與此相關(guān)的概念：行內(nèi)布局模型（inline layout model）——定義了行內(nèi)元素是如何定位的，在行內(nèi)元素格式（InlineFormatting）中有具體說明

盒子的尺寸的計算（Calculating BoxDimensions）

在CSS2.1中，塊級元素只能是矩形形狀的。當(dāng)我們需要計算一個塊級元素的整體尺寸時，需要同時把內(nèi)容區(qū)域（content area）［注釋1］的長寬，連同此元素的外邊距，內(nèi)邊距，以及邊框都計算在內(nèi)

［注釋1］：此文章中頻繁提到content 和content area這兩個概念，雖然從字面上都可以理解為盒子中的內(nèi)容區(qū)域（content），但從后文的敘述來看，這兩個概念還是有區(qū)別的，到這篇文章發(fā)布為止，我還是對這兩者的區(qū)別有迷惑，希望有興趣閱讀原文的朋友能留言告訴我這兩者的區(qū)別，以便于我更正文中的錯誤。

我們可以通過聲明寬和高來定義一個元素的內(nèi)容（content）的寬度和高度。如果沒有做任何的聲明，寬度和高度的默認值將是自動（auto）

w3schools上對于盒子模型的圖示如下

在圖的下方有一段很重要的話Important： When you specifythe width and height properties of an element with CSS， you are just settingthe width and height of the content area.也就是說當(dāng)我們在css中設(shè)計一個塊級元素的width和height屬性時比如.box{width ：100px; height:100px}時，其中的width 和height僅僅是對content部分設(shè)置的，即定義上圖中padding下虛線方框內(nèi)區(qū)域的長和寬。而不是內(nèi)容，內(nèi)邊距，邊框的總和（但在IE的早期版本包括IE6中，盒子模型的width和height卻恰恰是這樣定義的，盡管符合人們思考的邏輯，但是不符合規(guī)范，這會造成嚴重的問題）

對寬度為自動狀態(tài)的靜態(tài)（static）定位元素（即無定位），和相對定位（relatively positioned）元素來說，計算寬度的方法是，將他們包含塊（containing block）［注釋2］的寬度減去此元素的橫向的所有外邊距，內(nèi)邊距，邊框，滾動條。也就是說，從包含塊的寬度中除去元素的橫向外邊距，內(nèi)邊距，邊框，滾動條（如果存在的話）的寬度，所剩的值就是了。

［注釋2］：包含塊（containing block）。如果你知道絕對定位和相對定位的實現(xiàn)原理的話，這個注釋可以忽略。包含塊可以理解為一個矩形，而這個矩形的作用是為它里面包含的元素提供一個參考，內(nèi)部元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。例如在絕對定位中，距離它最近的已定位（position為fixed，relative或absolute）的祖先元素即為包含塊。這算比較初級的概念，不深究，請百度。

包含塊的定位屬性和尺寸被作為后代元素定位和尺寸計算的參考。盡管元素的定位必須遵從與他們的塊級元素來進行定位，但是他們也非受限于它。后代的元素也可以溢出包含塊。在大多數(shù)情況下， generated boxes［注釋3］通常扮演著子代元素包含塊的角色。想要充分了解包含塊的大量細節(jié)信息請點擊ContainingBlock。