CSS學習筆記07 盒子模型

一、盒子模型

所謂盒子模型就是把HTML頁面中的元素看做是一個矩形的盒子，也就是一個盛裝內容的容器。每一個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

用公式表示就是：盒子=邊框+內邊距+內容區域+外邊距

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

注意：背景應用於由內容和內邊距、邊框組成的區域。

     

能夠看到背景色穿透了內容區域，內邊距區域與邊框。

內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由用戶代理樣式表設置外邊距和內邊距。能夠經過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。這能夠分別進行，也可使用通用選擇器對全部元素進行設置：

* {
    margin: 0;
    padding: 0;
}

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

二、內邊距

邊框和內容區域之間的空白區域叫作內邊距，由CSS的padding屬性來定義，可使用長度值或百分比值，可是不容許使用負值（設置無效）。

能夠經過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距（順時針方向）

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

如：

padding屬性是一個複合屬性

• padding:10px;  表示上下左右都是10px的內邊距
• padding:10px 12px;  表示設置上下是10px的寬度，左右是12px的寬度
• padding:10px 12px 13px 14px;  分別設置的是 上 右 下 左邊距的寬度
• padding:10px 20px 5px;  表示上邊距爲10px，左右邊距爲20px，下邊距爲5px

三、邊框

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border 屬性容許你規定元素邊框的樣式、寬度和顏色。 

3.一、邊框樣式

可使用下面四個屬性來分別設置上、右、下、左邊框的樣式（順時針方向）

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

常見的邊框樣式有：none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線

一樣邊框的樣式border-style也是一個複合屬性，與內邊距padding設置同樣

3.二、邊框寬度

可使用下面四個屬性來分別設置上、右、下、左邊框的寬度（順時針方向）

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

一般狀況下用像素值來表示邊框的寬度，設置邊框的寬度以前，必須設置邊框的樣式，否者設置邊框寬度沒有任何意義，邊框的寬度border-width是一個複合屬性，與內邊距padding設置同樣

從這裏也能夠看出，背景色穿透了盒子的邊框

3.三、邊框顏色

與邊框樣式，邊框的寬度同樣，邊框顏色也可使用四個屬性來分別設置上、右、下、左邊框的寬度（順時針方向）

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

一樣的，邊框顏色border-color也是一個複合屬性，設置與邊框樣式，邊框寬度同樣

四、外邊距

元素邊框之間的空白區域是外邊距，由CSS的margin屬性來定義，可使用任何長度單位、百分數值甚至負值。

與內邊距相似，能夠經過使用下面四個單獨的屬性，分別設置上、右、下、左外邊距（順時針方向）

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

margin也是一個複合屬性，與padding的設置方式同樣。

五、外邊距合併

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

外邊距合併（疊加）是一個至關簡單的概念。可是，在實踐中對網頁進行佈局時，它會形成許多混淆。
簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
當一個元素出如今另外一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

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

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

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

這就是一系列的段落元素佔用空間很是小的緣由，由於它們的全部外邊距都合併到一塊兒，造成了一個小的外邊距。
外邊距合併初看上去可能有點奇怪，可是實際上，它是有意義的。以由幾個段落組成的典型文本頁面爲例。第一個段落上面的空間等於段落的上外邊距。若是沒有外邊距合併，後續全部段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味着段落之間的空間是頁面頂部的兩倍。若是發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一塊兒，這樣各處的距離就一致了。

 

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