CSS 框模型

一，CSS 框模型 (Box Model)

規定元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。

以下圖所示：

 

二，CSS padding屬性

CSS padding 屬性定義元素邊框與元素內容之間的空白區域。padding 屬性接受長度值或百分比值，但不容許使用負值。

能夠直接設置四個方向（上，右，下，左）的內邊距：

h1 {padding: 10px;}  
  
或者

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

也可經過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：

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

內邊距的百分比數值

前面提到過，能夠爲元素的內邊距設置百分數值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距同樣。因此，若是父元素的 width 改變，它們也會改變。

下面這條規則把段落的內邊距設置爲父元素 width 的 10%：

p {padding: 10%;}

例如：若是一個段落的父元素是 div 元素，那麼它的內邊距要根據 div 的 width 計算。

<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div> 

注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對於父元素寬度設置，而不是相對於高度。

 

默認值：	0
繼承性：	no
版本：	CSS1
JavaScript 語法：	object.style.padding="10px 5px"

可能的值

值	描述
auto	瀏覽器計算內邊距。
length	規定以具體單位計的內邊距值，好比像素、釐米等。默認值是 0px。
%	規定基於父元素的寬度的百分比的內邊距。
inherit	規定應該從父元素繼承內邊距。

 

 

三，CSS 邊框屬性

CSS border 屬性容許你規定元素邊框的樣式(border-style)、寬度(border-width)和顏色(border-color)。（若是有可見背景的話，元素的背景會延伸到邊框區域，由於元素的背景是內容、內邊距和邊框區的背景）

既能夠直接定義邊框的樣式、寬度、顏色，也能夠定義單邊樣式、寬度、顏色。以下圖所示：

屬性	描述
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 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

能夠直接設置四個方向（上，右，下，左）的外邊距：

h1 {margin: 10px;}  
  
或者

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

也能夠使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響全部其餘外邊距：

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

 

默認值：	0
繼承性：	no
版本：	CSS1
JavaScript 語法：	object.style.margin="10px 5px"

可能的值

值	描述
auto	瀏覽器計算外邊距。
length	規定以具體單位計的外邊距值，好比像素、釐米等。默認值是 0px。
%	規定基於父元素的寬度的百分比的外邊距。
inherit	規定應該從父元素繼承外邊距。

 

下面介紹：外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。（ps:只有普通文檔流中塊框的垂直外邊距纔會放生外邊距合併，行內框、浮動框或絕對定位框之間的外邊距不會合並。）

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

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

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

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

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

這就是一系列的段落元素佔用空間很是小的緣由，由於它們的全部外邊距都合併到一塊兒，造成了一個小的外邊距：

 

 

 

文章出自： http://www.cnblogs.com/iceflorence/