整理自： The CSS Box Model

中文：CSS 盒模型

CSS 盒模型

網頁設計中的每個元素都是長方形的盒子。 盒子的尺寸是怎樣精确計算的，請看下圖：

如果是 Firebug 使用者的話(基本和前端有關的都會用到 Firebug 吧 – 糖伴蕃茄)，就會很熟悉下面的圖表了。

這個圖表很好地展示了作用于頁面上任意盒子的數值。

注意以上兩個例子中，margin 都是白色的。Margin 比較特别，它不會影響盒子本身的大小，但是它會

影響和盒子有關的其他内容，是以 margin 是盒模型的一個重要的組成部分。

盒子本身的大小是這樣計算的：

Width	width + padding-left + padding-right + border-left + border-right
Height	height + padding-top + padding-bottom + border-top + border-bottom

值未聲明的情況

如果未聲明 padding 或者 border，那他們或者值為零(使用 css reset 時)，或者為浏覽器的預設值(很可能不是零，尤其是那些通常沒有重置的表單元素)

塊級盒的預設寬度

如果未聲明寬度，并且盒子是靜态或者相對定位的，寬度會保持 100％的 寬度，padding 和 border 會向内推動，而不是向外擴充。

但是，如果明确設定盒子的寬度為 100％，那麼 padding 就會向外延展。

The lesson here being that the default width of a box isn’t really 100% but a less tangible “whatever is left”. This is particularly valuable to know, since there are lots of circumstances where it is immensely useful to either set or not set a width.

要注意的是，盒子的預設寬度并不真的是 100％，而是剩下的可能值(應該是說，剩餘真實存在的寬度 － 糖伴蕃茄)。應該了解這個特殊值，因為很多情況下，它對于設定/不設定寬度都是非常有用的。

我遇到的最大的麻煩就是 textarea(文本框) 元素了，它們需要設為寬度為所需的”cols”屬性，并且不能包含子元素。是以通常需要明确的設定 textarea 的寬度為 100%，但有 padding 時，就會延展 textarea 的寬度。固定寬度環境下，通常可以設定為合适的像素值寬度，但是變寬情況就沒那麼幸運了。

無寬度的絕對定位盒子

未設定寬度的絕對定位的盒子的表現有點不一樣。它們的寬度隻需要适合它們所包含的内容即可。是以，如果盒中隻有一個單詞，盒子就會像那個詞的表現一樣寬。如果變成兩個詞，盒子的寬度也會相應增加。

這種情況會持續到盒子的寬度達到父元素寬度的 100%（最近的相對定位的父元素或者浏覽器視窗），然後就會折行。

對盒子來說，垂直擴充以适應包含的内容是很自然的。值得奇怪的是，不僅僅是不同平台下的文本表現不同，不同的浏覽器處理這個問題時，也有很多怪癖。

無寬度浮動盒子

同無寬度的絕對定位盒子的表現一樣。盒子的寬度隻需要擴充到所包含内容的寬度，直到其父元素的寬度（其父元素不必是相對定位的）。由于這些無寬度盒 子的脆弱性，我們要學到的是關鍵任務模式的時候它們是不能依賴的，像總體頁面布局中。如果浮動一列作為側邊欄使用，并指望那些内部元素（如圖檔）來負責包 含它的寬度，你就是在自找麻煩。

内聯元素也是盒子

我們這裡一直把重點放在塊級元素的盒子上。很容易就可以把塊級元素想象為盒子，但是内聯元素也是盒子。可以把他們想象為非常長而窄的長方形，它們也可以像其它盒子一樣有 margin, padding he border

折行使它看起來有些不好了解。如上所示的左 margin 把盒子推向右邊，但是隻在第一行有效，因為那是盒子的起點。padding 正常的應用在文本的上部或下部，當折行時它會忽略上面行的 padding 并且以行高(line-height)要求的位置作為起點。透明背景是為了讓效果看起來更清楚。

親眼目睹一下

想看看組成頁面的每個單獨的“盒子”嗎？試着把這行代碼暫時放入樣式表：

* {


   		border: 1px solid red !important;


	}
           

VN:F [1.6.1_878] 送出中...