CSS學習（二）框模型概述

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。

1.CSS 框模型概述

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。

內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者代理程式樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選取器對所有元素進行設定：

* {  margin: 0;  padding: 0;}

在 CSS 中，width 和 height 指的是內容地區的寬度和高度。增加內邊距、邊框和外邊距不會影響內容地區的尺寸，但是會增加元素框的尺寸。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設定為 70 像素，請看：

#box {  width: 70px;  margin: 10px;  padding: 5px;}

提示：內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。

提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

瀏覽器安全色性

一旦為版面設定了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子項目。

術語翻譯

• element : 元素。
• padding : 內邊距，也有資料將其翻譯為填充。
• border : 邊框。
• margin : 外邊距，也有資料將其翻譯為空白或空白邊。

在 w3school，我們把 padding 和 margin 統一地稱為內邊距和外邊距。邊框內的空白是內邊距，邊框外的空白是外邊距，很容易記吧：）

 

2.CSS 內邊距

元素的內邊距在邊框和內容區之間。控制該地區最簡單的屬性是 padding 屬性。

CSS padding 屬性定義元素邊框與元素內容之間的空白地區。

CSS padding 屬性

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。

例如，如果您希望所有 h1 元素的各邊都有 10 像素的內邊距，只需要這樣：

h1 {padding: 10px;}

您還可以按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

單邊內邊距屬性

也通過使用下面四個單獨的屬性，分別設定上、右、下、左內邊距：

• padding-top
• padding-right
• padding-bottom
• padding-left

您也許已經想到了，下面的規則實現的效果與上面的簡寫規則是完全相同的：

h1 {  padding-top: 10px;  padding-right: 0.25em;  padding-bottom: 2ex;  padding-left: 20%;  }

內邊距的百分比數值

前面提到過，可以為元素的內邊距設定百分數值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。

下面這條規則把段落的內邊距設定為父元素 width 的 10%：

p {padding: 10%;}

例如：如果一個段落的父元素是 div 元素，那麼它的內邊距要根據 div 的 width 計算。

<div style="width: 200px;"><p>This paragragh is contained within a DIV that has a width of 200 pixels.</p></div> 

注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對於父元素寬度設定，而不是相對於高度。

 

3.CSS 外邊距

圍繞在元素邊框的空白地區是外邊距。設定外邊距會在元素外建立額外的“空白”。

設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

CSS margin 屬性

設定外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。

margin 可以設定為 auto。更常見的做法是為外邊距設定長度值。下面的聲明在 h1 元素的各個邊上設定了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}

下面的例子為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

與內邊距的設定相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的：

margin: top right bottom left

另外，還可以為 margin 設定一個百分比數值：

p {margin : 10%;}

百分數是相對於父元素的 width 計算的。上面這個例子為 p 元素設定的外邊距是其父元素的 width 的 10%。

margin 的預設值是 0，所以如果沒有為 margin 聲明一個值，就不會出現外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支援 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面產生“空行”。因此，如果沒有為 p 元素宣告外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋預設樣式。

值複製

還記得嗎？我們曾經在前兩節中提到過值複製。下面我們為您講解如何使用值複製。

有時，我們會輸入一些重複的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值複製，您可以不必重複地鍵入這對數字。上面的規則與下面的規則是等價的：

p {margin: 0.5em 1em;}

這兩個值可以取代前面 4 個值。這是如何做到的呢？CSS 定義了一些規則，允許為外邊距指定少於 4 個值。規則如下：

• 如果缺少左外邊距的值，則使用右外邊距的值。
• 如果缺少下外邊距的值，則使用上外邊距的值。
• 如果缺少右外邊距的值，則使用上外邊距的值。

提供了更直觀的方法來瞭解這一點：

換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）複製得到。如果給定了兩個值，第 4 個值會從第 2 個值複製得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）複製得到。最後一個情況，如果只給定一個值，那麼其他 3 個外邊距都由這個值（上外邊距）複製得到。

利用這個簡單的機制，您只需指定必要的值，而不必全部都應用 4 個值，例如：

h1 {margin: 0.25em 1em 0.5em;}/* 等價於 0.25em 1em 0.5em 1em */h2 {margin: 0.5em 1em;}/* 等價於 0.5em 1em 0.5em 1em */p {margin: 1px;}/* 等價於 1px 1px 1px 1px */

這種辦法有一個小缺點，您最後肯定會遇到這個問題。假設希望把 p 元素的上外邊距和左外邊距設定為 20 像素，下外邊距和右外邊距設定為 30 像素。在這種情況下，必須寫作：

p {margin: 20px 30px 30px 20px;}

這樣才能得到您想要的結果。遺憾的是，在這種情況下，所需值的個數沒有辦法更少了。

再來看另外一個例子。如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：

p {margin: auto auto auto 20px;}

同樣的，這樣才能得到你想要的效果。問題在於，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。

單邊外邊距屬性

您可以使用單邊外邊距屬性為元素單邊上的外邊距設定值。假設您希望把 p 元素的左外邊距設定為 20px。不必使用 margin（需要鍵入很多 auto），而是可以採用以下方法：

p {margin-left: 20px;}

您可以使用下列任何一個屬性來只設定相應上的外邊距，而不會直接影響所有其他外邊距：

• margin-top
• margin-right
• margin-bottom
• margin-left

一個規則中可以使用多個這種單邊屬性，例如：

h2 {  margin-top: 20px;  margin-right: 30px;  margin-bottom: 30px;  margin-left: 20px;  }

當然，對於這種情況，使用 margin 可能更容易一些：

p {margin: 20px 30px 30px 20px;}

不論使用單邊屬性還是使用 margin，得到的結果都一樣。一般來說，如果希望為多個邊設定外邊距，使用 margin 會更容易一些。不過，從文檔顯示的角度看，實際上使用哪種方法都不重要，所以應該選擇對自己來說更容易的一種方法。

提示和注釋

提示：Netscape 和 IE 對 body 標籤定義的預設邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內部填充（padding）的預設值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，並將之正確顯示於 Opera 中，那麼必須對 body 的 padding 進行自訂。

 

4.CSS 外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。

外邊距合并

外邊距合并（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行布局是，它會造成許多混淆。

簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。

當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。請看：

當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。請看：

儘管看上去有些奇怪，但是外邊距甚至可以與自身發生合并。

假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并：

如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：

這就是一系列的段落元素佔用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等於段落的上外邊距。如果沒有外邊距合并，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對位置之間的外邊距不會合并。