CSS 方塊模型

CSS 框模型

• CSS 框模型概述
• CSS 內邊距
• CSS 邊框
• CSS 外邊距
• CSS 外邊距合併

一，CSS 框架模型 (Box Model)

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

如下圖：

 

二，CSS padding屬性

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

可以直接設定四個方向（上，右，下，左）的內邊距：

<span style="color: #000000;">h1 {padding: 10px;}  
  
或者<br>
h1 {padding: 10px 0.25em 2ex 20%;}</span>

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

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

內邊距的百分比數值

前面提到過，可以為元素的內邊距設定百分數值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。

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

p {padding: 10%;}

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width: 200px;"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This paragragh is contained within a DIV that has a width of 200 pixels.<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> </span></span>

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

 

預設值：	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 属性，这个属性接受任何长度单位、百分数值甚至负值。

可以直接设置四个方向（上，右，下，左）的外边距：

<span>h1 {margin: 10px;}  
  
或者<br>
h1 {margin: 10px 0.25em 2ex 20%;}</span>

也可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：

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

 

默认值：	0
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.margin="10px 5px"

可能的值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

 

下面介紹：外邊距合併

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

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

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

儘管看起來有些奇怪，但是外邊距甚至可以與自身發生合併。

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

如果這個外邊距遇到另一個元素的外邊距，它也會發生合併：

這就是一系列的段落元素佔用空間非常小的原因，因為它們的所有外邊距都合併到一起，形成了一個小的外邊距：