CSS 盒模型

概覽

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

元素框的最內部分是實際的內容，直接包圍內容的是內邊距，內邊距的邊緣是邊框，邊框之外是外邊距，外邊距是透明的，所以不會遮擋其後的任何元素。

內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由用戶代理樣式表（瀏覽器內置樣式表）設置外邊距和內邊距。能夠經過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。

* {
    margin: 0;
    padding: 0;
}

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

假設框的每一個邊上有 10 個像素的外邊距和 5 個像素的內邊距。若是但願這個元素框達到 100 個像素，就須要將內容的寬度設置爲 70 像素，請看下圖：

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

瀏覽器兼容性

大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現倒是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE 5.X 和 6 在使用本身的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

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

外邊距 margin

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外建立額外的「空白」。

可選值

設置外邊距的最簡單的方法就是使用 margin 屬性，該屬性接受任何長度單位，能夠是像素（px）、英寸（in）、毫米（mm）、em和auto。

在 h1 元素的各個邊上設置了 1/4 英寸寬的空白

h1 {margin : 0.25in;}

爲 h1 元素的四個邊分別定義不一樣的外邊距

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

這些值的順序是從上外邊距 (margin-top) 開始圍着元素順時針旋轉的：

margin: top right bottom left

等價於

h1 {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 15px;
}

爲 margin 設置一個百分比數值

p {margin : 10%;}

百分數是相對於父元素的 width 計算的。

值複製

值複製是指 margin 的四個方位屬性值部分缺省時的自動填充。

四個值部分缺省，有以下三種狀況：

1 個值，其餘 3 個值都由這個值（上外邊距）複製獲得

p {margin: 1px;}    /* 等價於 1px 1px 1px 1px */

2 個值，第 3 個值（下外邊距）由第 1 個值（上外邊距）複製獲得，第 4 個值（左外邊距）由第 2 個值（右外邊距）複製獲得

h2 {margin: 0.5em 1em;}    /* 等價於 0.5em 1em 0.5em 1em */

3 個值，第 4 個值（左外邊距）由第 2 個值（右外邊距）複製獲得

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

概括起來就是，上下對應，左右對應，第一個值是 top.

值合併

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

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

當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

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

外邊距甚至能夠與自身發生合併，假設有一個空元素，它有外邊距，可是沒有邊框或內邊距。在這種狀況下，上外邊距與下外邊距就碰到了一塊兒，它們會發生合併：

若是這個外邊距遇到另外一個元素的外邊距，它還會發生合併：

外邊距合併既可以節省頁面空間又能使頁面更加美觀。

註釋：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

邊框 border

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。

CSS border 屬性容許你規定元素邊框的樣式、寬度和顏色。

CSS 邊框有着豐富的內容，爲了不此頁面過長，特將其獨立出來介紹，傳送門。

內邊距 padding

元素的內邊距是在邊框和內容區之間。

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

內邊距的使用與外邊距的使用相似。

給 h1 元素的各邊添加 10 像素的內邊距

h1 {padding: 10px;}

您還能夠按照上、右、下、左的順序分別設置各邊的內邊距，各邊都可以使用不一樣的單位或百分比值

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

一樣能夠分別設置四個方位

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

內邊距與外邊距同樣，遵循值複製的規則。

• 若是缺乏左外邊距的值，則使用右外邊距的值。

• 若是缺乏下外邊距的值，則使用上外邊距的值。

• 若是缺乏右外邊距的值，則使用上外邊距的值。