【轉載】CSS盒子模型

 

　　盒子模型（Box Model）是從CSS誕生之時便產生的一個概念，對網頁中的大部分對象，實際呈現形式就是一個盒子形狀對象（即塊狀對象），對於這個基礎又重要的概念，只要掌握盒子模型的尺寸及佔位的標準技術方法，那就可以靈活駕馭盒子模型了！

  

CSS盒子模型

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

　　

　　盒子裡面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。

　　如果你是一個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 時)，或者為瀏覽器的預設值(很可能不是零，尤其是那些通常沒有重設的表單元素)。

　　如果未聲明盒子的width(而且這個盒子是一個區塊層級元素)，那麼事情就變得有點怪異，我們先看這點，然後再看一下其他優秀的關於盒子模型的資料。

  

塊級盒的預設寬度

　　如果沒有聲明寬度，而且盒子是靜態或者相對定位，那麼寬度將保持100%且padding和border將向內推動而不是向外擴充。

　　如果明確的確定寬度為100%，那麼padding就會向外擴充。

　　

　　從這個例子可以看出，盒子的預設寬度並不是100%，也可能是其他值，應該瞭解這種特別有價值的情況，因為在現存的很多情況下，它對於設定/不設定寬度是很多協助的。

　　我遇到的最大的麻煩就是 textarea(文字框) 元素了，它們需要設為寬度為所需的”cols”屬性，並且不能包含子項目。因此通常需要明確的設定 textarea 的寬度為 100%，但有 padding 時，就會延

展 textarea 的寬度。固定寬度環境下，通常可以設定為合適的像素值寬度，但是變寬情況就沒那麼幸運了。

  

無寬度的絕對位置盒子

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

　　

　　這種情況會持續到盒子的寬度達到父元素寬度的 100%（最近的相對定位的父元素或者瀏覽器視窗），然後就會折行。
對盒子來說，垂直擴充以適應包含的內容是很自然的。值得奇怪的是，不僅僅是不同平台下的文本表現不同，不同的瀏覽器處理這個問題時，也有很多怪癖。

　　

  

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

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

  　　

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

  

親眼目睹一下

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

* { border: 1px solid red !important; }

 

　　 

 

　　英文原文：The CSS Box Model
　　中文原文：CSS 盒模型