CSS 教程Part4 [盒子模型]（摘錄自 W3C School）

文章目錄

• CSS 內邊距
• CSS 邊框
• CSS 外邊距
• CSS 外邊距合并

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

CSS 框模型概述

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

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

*{  margin: 0;  padding: 0;}

 

       在 CSS 中，width 和 height 指的是內容地區的寬度和高度。增加內邊距、邊框和外邊距不會影響內容地區的尺寸，但是會增加元素框的尺寸。假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設定為 70 像素，請看：

 

 

 

 

 

 

 

 

 

 

 

 

 

#box {

    width: 70px;

    margin: 10px;

    padding: 5px;

}

       根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子項目。

       小竅門：盡量使用 margin 屬性來控制元素位置和布局。

CSS 內邊距

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

padding：一個聲明中設定所有內邊距屬性

padding:10px 5px 15px 20px; 上、右、下、左 （順時針）

padding:10px 5px 15px; 上、左右、下

padding:10px 5px; 上下、左右

 CSS 內邊距屬性

CSS 邊框

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

邊框的樣式

       樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。

CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式，包括 none。

border-style 屬性用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式

border-style:dotted solid double dashed;  上邊框是點狀 右邊框是實線 下邊框是雙線 左邊框是虛線

這兩種方法是等價的：必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。

p {border-style: solid solid solid none;}p {border-style: solid; border-left-style: none;}

 

邊框的寬度

border-width 簡寫屬性為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。

       事實上，忘記聲明邊框樣式是一個常犯的錯誤。如果沒有聲明樣式，即邊框根本不存在，那麼邊框就不可能有寬度，因此邊框寬度自動化佈建為 0。

邊框的顏色

border-color 屬性是一個簡寫屬性，可設定一個元素的所有邊框中可見部分的顏色，或者為 4 個邊分別設定不同的顏色。

 

透明邊框

       我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望建立一個不可見的邊框。CSS2 引入了邊框顏色值 transparent。這個值用於建立有寬度的不可見框線。請看下面的例子：

a:link, a:visited {

    border-style: solid;

    border-width: 5px;

    border-color: transparent;

}

a:hover {

    border-color: gray;

}

       從某種意義上說，利用 transparent，使用邊框就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當於內邊距，因為元素的背景會延伸到邊框地區（如果有可見背景的話）。

CSS 邊框屬性：

CSS 外邊距

       圍繞在元素邊框的空白地區是外邊距。設定外邊距會在元素外建立額外的“空白”。設定外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。（百分數是相對於父元素的 width 計算的）

margin 簡寫屬性在一個聲明中設定所有外邊距屬性。該屬性可以有 1 到 4 個值。

CSS 外邊距屬性

CSS 外邊距合并

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

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

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