CSS框模型（框模型概述、內邊距、邊框、外邊距、外邊距合并）

標籤：style   blog   http   color   使用   strong   2014   問題   

CSS 框模型概述

 

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

 

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

內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者代理程式樣式表設定外邊距和內邊距。可以通過將元素的 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 統一地稱為內邊距和外邊距。邊框內的空白是內邊距，邊框外的空白是外邊距，很容易記吧：）

CSS 內邊距屬性

屬性	描述
padding	簡寫屬性。作用是在一個聲明中設定元素的所內邊距屬性。
padding-bottom	設定元素的下內邊距。
padding-left	設定元素的左內邊距。
padding-right	設定元素的右內邊距。
padding-top	設定元素的上內邊距。

 

CSS 邊框屬性

屬性	描述
border	簡寫屬性，用於把針對四個邊的屬性設定在一個聲明。
border-style	用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
border-width	簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。
border-color	簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。
border-bottom	簡寫屬性，用於把下邊框的所有屬性設定到一個聲明中。
border-bottom-color	設定元素的下邊框的顏色。
border-bottom-style	設定元素的下邊框的樣式。
border-bottom-width	設定元素的下邊框的寬度。
border-left	簡寫屬性，用於把左邊框的所有屬性設定到一個聲明中。
border-left-color	設定元素的左邊框的顏色。
border-left-style	設定元素的左邊框的樣式。
border-left-width	設定元素的左邊框的寬度。
border-right	簡寫屬性，用於把右邊框的所有屬性設定到一個聲明中。
border-right-color	設定元素的右邊框的顏色。
border-right-style	設定元素的右邊框的樣式。
border-right-width	設定元素的右邊框的寬度。
border-top	簡寫屬性，用於把上邊框的所有屬性設定到一個聲明中。
border-top-color	設定元素的上邊框的顏色。
border-top-style	設定元素的上邊框的樣式。
border-top-width	設定元素的上邊框的寬度。

CSS 外邊距屬性

屬性	描述
margin	簡寫屬性。在一個聲明中設定所有外邊距屬性。
margin-bottom	設定元素的下外邊距。
margin-left	設定元素的左外邊距。
margin-right	設定元素的右外邊距。
margin-top	設定元素的上外邊距。

 

CSS 外邊距合并

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

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

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

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

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

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

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

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

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

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