1、概述

為了更好的處理 元素內容、內邊距、邊框 和 外邊距 之間的關系，CSS 定義了框模型如下：

內邊距、邊框 和 外邊距 的默認值都是零，可以通過設置元素的 padding、border 和 margin 屬性來覆蓋這些默認的瀏覽器樣式。另外，要註意的是 width 和 height 屬性可以分別用於設置內容區域的寬度和高度

2、內邊距

padding 屬性定義元素的內邊距，其接受長度值和百分數值，要註意的是百分數值是相對於其父元素的 width 屬性計算的

一般情況下，我們需要指定四個值分別對應上、右、下、左四個方向，但是 CSS 提供了一種名為 值賦值 的機制，允許為我們可以指定少於 4 個值，其規則如下：

• 如果缺少左邊的值，則使用右邊的值代替
• 如果缺少下邊的值，則使用上邊的值代替
• 如果缺少右邊的值，則使用上邊的值代替

也就是說，如果提供了四個值，則按上、右、下、左的順序分別設置；如果提供三個值，則第一個值設置上邊，第二個值設置左邊和右邊，第三個值設置下邊；如果提供兩個值，則第一個值設置上邊和下邊，第二個值設置左邊和右邊；如果只提供一個值，則該值同時用於設置上、右、下、左四個方向

如果希望單獨設置某一方向的內邊距，則可以使用 padding-top、padding-right、padding-bottom 和 padding-left 屬性實現

3、邊框

（1）樣式

可以使用 border-style

• none：無邊框
• hidden：一般情況下效果與 none 相同，但是應用於表格時，可以用於解決邊框沖突
• dotted：點狀邊框，不過在大多數瀏覽器中呈現為實線
• dashed：虛線邊框，不過在大多數瀏覽器中呈現為實線
• solid：實線邊框
• double：雙線邊框，寬度等於 border-width 的值
• groove：3D 凹槽邊框，其效果取決於 border-color 的值
• ridge：3D 壟狀邊框，其效果取決於 border-color 的值
• inset：3D inset 邊框，其效果取決於 border-color 的值
• outset：3D outset 邊框，其效果取決於 border-color 的值
• inherit：從父元素繼承 border-style 屬性

該屬性同樣遵循 值賦值 機制，如果希望單獨設置某一方向的邊框樣式，可以使用 border-style-top、border-style-right、border-style-bottom 和 border-style-left 屬性實現

（2）寬度

可以使用 border-width 屬性設置邊框寬度，其可選值如下：

• thin：細邊框
• medium：默認值，中等邊框
• thick：粗邊框
• 長度值
• inherit：從父元素繼承 border-width 屬性

該屬性同樣遵循 值賦值 機制，如果希望單獨設置某一方向的邊框樣式，可以使用 border-width-top、border-width-right、border-width-bottom 和 border-width-left 屬性實現

（3）顏色

可以使用 border-color 屬性設置邊框寬度，其可選值如下：

• 顏色名稱
• 十六進制顏色
• RGB 顏色
• transparent：默認值，透明
• inherit：從父元素繼承 border-color 屬性

該屬性同樣遵循 值賦值 機制，如果希望單獨設置某一方向的邊框樣式，可以使用 border-color-top、border-color-right、border-color-bottom 和 border-color-left 屬性實現

（4）屬性簡寫

使用 border 簡寫屬性允許我們在一個聲明中設置所有的邊框屬性，其順序如下：

• border-width
• border-style
• border-color

4、外邊距

margin 屬性定義元素的外邊距，其接受長度值和百分數值，也可以使用 auto，說明由瀏覽器計算外邊距，同樣的，該屬性也遵循 值賦值 機制，如果希望單獨設置某一方向的外邊距，則可以使用 margin-top、margin-right、margin-bottom 和 margin-left 屬性實現

現在我們再考慮這樣一個問題，當元素的外邊距重疊的時候會發生什麽呢？用一句簡單的話概括其規則就是：

當兩個垂直外邊距重疊時，它們將合並成一個外邊距，合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者

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

5、定位

（1）一切皆為框

在 CSS 中存在著這樣一種說法：一切皆為框

像 div、h1 和 p 等元素常常被稱為塊級元素，也可以將它們看成塊框；像 span 和 strong 等元素常常被稱為行內元素，也可以將它們看成行內框。我們可以使用 display 屬性改變框的類型，常見的可選值如下：

• none：此元素不會被顯示
• block：此元素將顯示為塊級元素，前後帶有換行符
• inline：此元素將顯示為內聯元素，前後沒有換行符，默認值
• inline-block：行內塊元素，CSS2.1 新增的值
• run-in：根據上下文作為塊級元素或內聯元素顯示
• list-item：作為列表顯示
• table：作為塊級表格來顯示，表格前後帶有換行符
• inline-table：作為內聯表格來顯示，表格前後沒有換行符

（2）一切皆可定位

任何元素都可以看成框，任何元素都可以進行定位，屬性 position 規定定位類型，其可選值如下：

• static：默認值，不設置定位，元素將出現在正常流中，此時忽略 top, bottom, left, right 聲明
• absolute：生成絕對定位元素，相對於 static 定位以外的第一個父元素進行定位，元素的位置通過 left, top, right 和 bottom 屬性進行規定
• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位，元素的位置通過 left, top, right 和 bottom 屬性進行規定
• relative：生成相對定位的元素，相對於其正常位置進行定位，元素的位置通過 left, top, right 和 bottom 屬性進行規定
• inherit：從父元素繼承 position 屬性

position 屬性常常需要配合下面的屬性確定框的移動距離，它們接受一個長度值或一個百分數值：

• top：定義元素的上外邊距邊界與其包含塊上邊界之間的偏移
• right：定義元素的右外邊距邊界與其包含塊右邊界之間的偏移
• bottom：定義元素的下外邊距邊界與其包含塊下邊界之間的偏移
• left：定義元素的左外邊距邊界與其包含塊左邊界之間的偏移

（3）定位模式

下面我們再來談談 CSS 中三種定位模式的區別，它們分別是絕對定位、相對定位和浮動

• 相對定位：如果對一個元素進行相對定位，它將出現在原本所在的位置上，然後通過設置垂直或水平位置，讓該元素相對於起點進行移動

  註意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間，因此，移動元素會導致覆蓋頁面上的其它元素

• 絕對定位：如果對一個元素進行絕對定位，它將從文檔流中完全刪除，原先在文檔流中所占的空間也會關閉，然後通過設置垂直或水平位置，讓其相對於最近的已定位祖先元素進行移動，如果沒有已定位的祖先元素，則相對於最初的包含塊進行移動

  註意，因為絕對定位的元素與文檔流無關，所以它們可以覆蓋頁面上的其它元素

• 浮動：浮動框可以任意移動，直到它碰到包含框或另一個浮動框為止，另外，由於浮動框不在文檔普通流中，所以文檔普通流中的塊框表現得就像浮動框不存在一樣，可以使用 float 屬性定義元素向哪一側浮動，可以使用 clear 屬性定義元素哪一側不允許其他浮動元素

CSS學習筆記之框模型