深入理解CSS盒子模型

深入理解CSS盒子模型

前言：前陣子在做一個項目時，在頁面布局方面遇到了一點小問題，於是上stackoverflow上求助。ifaou在幫助我解決我問題的同時，還推薦我閱讀一篇有關CSS盒子模型的文章《The CSS Box Model》，閱讀之後受益匪淺，才知道自己對盒子模型知識還是如此欠缺。恰逢學期末，項目驗收後暫時告一段落，有空閒的時間。於是想把這篇文章翻譯出來，一方面再給自己一點挑戰和鍛煉，另一方面也給大家參考，讓更多的人受益。

這篇文章適合初級web設計朋友，讓你對盒子模型有更近一步的理解。但是在閱讀這篇文章之前你應該對盒子模型html等基礎知識是有一定的了解，否則只會讓你更加雲裡霧裡。這篇文章不會像很多的中文教程那樣，把盒子模型內邊距，外邊距，如何定位等概念有條不紊的介紹一遍。這篇文章更多的是教你在實戰過程中如何自如的控制盒子的寬度，如何用最恰當的方法定位盒子，如何解決IE中盒子的種種bug。

之所以翻譯這篇外國文章，是因為我在學習的過程中也發現，國外的教程和過內的相比，它們授人以漁，更授人以魚 。不同於國內教程有章有節有點有條目，他們的敘述方式更接近談話式的由淺入深……總而言之，目的在於給更多的初學者提供一點啟示和幫助，不必像我一樣走了許多彎路。

這是我第一次翻譯，有欠缺的地方請大家指正。我盡量把它翻譯的通俗易懂，同時也加入了一些自己的語言自己的體會，和幫助理解的圖示（為了閱讀流暢，也就不另表示了）。附上原文地址：http://reference.sitepoint.com/css/boxmodel

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

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

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

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

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

我們可以通過聲明寬和高來定義一個元素的內容（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.也就是說當我們在css中設計一個塊級元素的width和height屬性時比如.box{width ：100px; height:100px}時，其中的width 和height僅僅是對content部分設置的，即定義上圖中padding下虛線方框內區域的長和寬。而不是內容，內邊距，邊框的總和（但在IE的早期版本包括IE6中，盒子模型的width和height卻恰恰是這樣定義的，盡管符合人們思考的邏輯，但是不符合規范，這會造成嚴重的問題）

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

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

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

［注釋3］ ：不知道generated boxes應該如何翻譯，有知道的朋友請告知，謝謝

對於浮動（floated）和絕對定位（absolutelypositioned）元素（包括固定定位（fixed）元素）來說， 自動狀態的寬度會使generated box收縮到緊貼它內容大小。

我覺得我在這裡有必要總結一下前兩段話的意思，前兩段話都是在說在寬度缺省的情況下（auto），盒子模型自動設置寬度的兩種方式。

我們知道，當我們放置一個塊級元素於頁面上時，並且不設置它的定位屬性（relative，absolute，fixed），即position:static，或者設置了position:relative的情況下，塊的寬度是延伸自動填充滿它的父元素的寬度區域

舉個例子：

以下為引用的內容：

.box1

{

background:black;

color:White;

height:100px;

padding:10px;

border:20px solid Red;

margin:30px;

}

注意.box1沒有設置任何的position屬性，也沒有寬度屬性。這是為了實驗相對定位或者無定位的情況

Html代碼：

以下為引用的內容：

<h2>Static or Relative Box</h2>

<div class="box1">For floated or absolutely positioned </div>

結果為：

 

即塊的寬度是延伸自動填充滿它的父元素的寬度區域。

所以當我們在計算一個被包裹中的元素的寬度時，我們只需要用父元素減去這個元素的外邊距，邊框，內邊距，和scrollbar，剩下就是它的寬度，因為它會自動填充。雖然這個基本上沒有實際應用可言……

但是浮動floated元素和絕對定位元素，他們的結果卻恰恰相反，他們會收縮以致包裹緊貼內容，同樣舉個例子

以下為引用的內容：

.box2

{

background:black;

color:White;

height:100px;

padding:10px;

border:20px solid Red;

margin:30px;

position:absolute;

}

 

 

這裡同樣沒有設置寬度，但是進行了絕對定位，html代碼：

以下為引用的內容：

<h2>Absolute or Float</h2>   

<div class="box2">For floated or absolutely positioned </div>

結果：

 

浮動元素和寬度

之前，在CSS2中，沒有聲明寬度的浮動元素，不會收縮並於緊貼（shrink to wrap）住他們的內容，恰恰相反的是，他們會不斷的延伸至與他們父元素最大寬度相當。這種行為在CSS2.1中被收縮緊貼代替了。但是無論如何，在IE6和更早的浏覽器版本中，一個沒有聲明寬度的浮動元素還是會收縮緊貼住它的內容作為一種默認的設置，除非子元素有自己的布局（has a layout）［注釋3］，比如說在這種情況下，父元素會伸展來適應父元素中的可用內容的寬度

［注釋3］：”IE的表現與其它浏覽器不同的原因之一是，顯示引擎使用了一個稱為布局的內部概念……windows上的IE使用布局概念來控制元素的尺寸和定位。那些“擁有布局”的元素負責本身及其子元素的尺寸設置和定位。如果