层叠样式表CSS2规范之八包含框模型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML>  <HEAD>    <TITLE>Examples of margins, padding, and borders</TITLE>    <STYLE type="text/css">      UL {         background: green;         margin: 12px 12px 12px 12px;        padding: 3px 3px 3px 3px;                                     /* No borders set */      }      LI {         color: black;                /* text color is black */         background: gray;            /* Content, padding will be gray */        margin: 12px 12px 12px 12px;        padding: 12px 0px 12px 12px; /* Note 0px padding right */        list-style: none             /* no glyphs before a list item */                                     /* No borders set */      }      LI.withborder {        border-style: dashed;        border-width: medium;        /* sets border width on all sides */        border-color: black;      }    </STYLE>  </HEAD>  <BODY>    <UL>      <LI>First element of list      <LI class="withborder">Second element of list is longer           to illustrate wrapping.    </UL>  </BODY></HTML>

结果是一个文档树，带有（在其它关系中）一个UL元素，它有两个LI子元素。

下面的第一张图显示了本例的呈现结果。第二张图显示了UL元素及其子元素LI元素的边距、边白和边框之间的关系。

Image illustrating how parent and child margins, borders,
and padding relate. [D]

注意：

每一个LI元素的框的内容宽度的计算是从上而下的；每一个LI框的包含块由UL元素生成。
每一个LI框的高度由它的内容高度给出，还要加上顶底边白，边框和边距。注意LI框间垂直边距的重合。
LI框的右边白宽度设置为0（'padding'属性）。在第二个演示中效果明显。
LI框的边距是透明的——边距总是透明的——因此UL边白和内容区域的背景色（绿色）就透了出来。
第二个LI元素规定了一个虚线边框（'border-style'属性）。

8.3 边距属性：'margin-top'，'margin-right'，'margin-bottom'，'margin-left'以及'margin'

边距属性设置了一个框的边距区的宽度。'margin'缩写属性设置所有四边的边距，而其它的边距属性只设置它们代表的那一边的边距。

本节定义的属性引用<margin-width>值的类型，可以是下面值之一：

<length>: 指定一个固定的宽度。
<percentage>: 百分比的计算基于生成的框的包含块的宽度。对于'margin-top'和'margin-bottom'是如此，除非是在页面上下文中（在那里，百分比相对于页面框的高度）。
auto: 其表现细节请参见宽度和边距的计算一章。

边距属性允许有负值，不过可能有与实现相关的限制。

'margin-top'，'margin-right'，'margin-bottom'，'margin-left'

值：	<margin-width> \| inherit
初始值：	0
适用于：	所有元素
可否继承：	否
百分比：	相对于包含块的宽度
媒介：	图形

这些属性设置框的顶，右，底，左边距。

H1 { margin-top: 2em }

'margin'

值：	<margin-width>{1,4} \| inherit
初始值：	对于缩写属性未定义
适用于：	所有元素
可否继承：	否
百分比：	相对于包含块的宽度
媒介：	图形

'margin'是在样式表的同一处设置'margin-top'，'margin-right'，'margin-bottom'以及'margin-left'的缩写属性。

如果仅有一个值，它将应用于所有四边。如果有两个值，顶底边距设置为第一个值，左右边距设置为第二个值。如果有三个值，顶边距设置为第一个值，左右边距设置为第二个值，底边距设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边距。

BODY { margin: 2em }         /* 所有的边距都设置为2em */BODY { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

上例中最后一个规则等同于如下的例子：

BODY {  margin-top: 1em;  margin-right: 2em;  margin-bottom: 3em;  margin-left: 2em;        /* 从相对边（右边）拷贝而来 */}

8.3.1 边距重合

在本规范中，表述边距重合意味着两个或多个框（可能相邻也可能嵌套）的相邻的边距（其间没有边白或边框间隔）重合在一起而形成一个单一的边距。

CSS2中，水平边距永远不会重合。

垂直边距可能在特定的框之间重合：

常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。
在一个浮动框和其它框之间的垂直边距不重合。
绝对和相对定位的框的边距不重合。

请参见边距，边白和边框的示例一章，以了解边距重合的例子。

8.4 边白属性： 'padding-top'，'padding-right'，'padding-bottom'，'padding-left'及'padding'

边白属性规定了一个框的边白区的宽度。'padding'缩写属性设置所有四边的边白，而其它的边白属性只设置它们代表的那一边的边白。

本节所定义的属性引用<padding-width>值类型，可以取下列值：

<length>: 指定一个确定宽度。
<percentage>: 百分比的计算基于生成的框的包含块的宽度，即使是对于'padding-top'和'padding-bottom'也是如此。

和边距属性不同，边白值不可以是负数。和边距属性相似，边白的百分比值也基于生成的框的包含块的宽度。

'padding-top'，'padding-right'，'padding-bottom'，'padding-left'

值：	<padding-width> \| inherit
初始值：	0
适用于：	所有元素
可否继承：	否
百分比：	相对于包含块的宽度
媒介：	图形

这些属性设置一个框的顶，右，底，左的边白。

BLOCKQUOTE { padding-top: 0.3em }

'padding'

值：	<padding-width>{1,4} \| inherit
初始值：	对于缩写属性未定义
适用于：	所有元素
可否继承：	否
百分比：	相对于包含块的宽度
媒介：	图形

'padding'属性是在样式表中的同一处设置'padding-top'，'padding-right'，'padding-bottom'及'padding-left'的缩写属性。

如果只有一个值，它适用于所有四边。如果有两个值，顶底边白设置为第一个值而左右边距设置为第二个值。如果有三个值，顶边白设置为第一个值，左右边白设置为第二个值，底边白设置为第三个值。如果有四个值，它们分别设置顶，右，底，左边白。

边白区域的表面颜色或图形由'background'属性确定：

H1 {   background: white;   padding: 1em 2em;}

上例中指定垂直边白（'padding-top'和'padding-bottom'）为'1em'而水平边白（'padding-right'和'padding-left'）为'2em'。'em'单位是相对于元素的字体尺寸的单位：'1em'等于使用的字体的尺寸。

8.5 边框属性

边框属性设置框的边框区的宽度，颜色和样式。这些属性使用于所有的元素。

注意。对于HTML而言，用户端对于某些元素（如按钮，菜单等）边框的渲染和其它“一般”元素可能有所不同。

8.5.1 边框宽度：'border-top-width'，'border-right-width'，'border-bottom-width'，'border-left-width'及'border-width'

边框宽度设置边框区的宽度。本节中定义的属性引用<border-width>值类型，可以取如下值：

thin: 一个窄的边框。
medium: 一个中等的边框。
thick: 一个厚边框。
<length>: 边框的厚度是显式值。显式的边框宽度不能为负数。

前三个值的解释取决于用户端。不过必须遵循如下关系：

'thin' <='medium' <= 'thick'.

另外，在一个文档中，这些宽度必须保持一致。

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'

值：	<border-width> \| inherit
初始值：	medium
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

这些属性设置框的顶底左右边框的宽度。

'border-width'

值：	<border-width>{1,4} \| inherit
初始值：	见个别属性
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

该属性是在样式表的同一处设置'border-top-width'，'border-right-width'，'border-bottom-width'及'border-left-width'的缩写属性。

如果只有一个值，它适用于所有四边。如果有两个值，顶底边框采用第一个值，左右边框采用第二个值。如果有三个值，顶边框采用第一个值，左右边框采用第二个值，而底边框采用第三个值。如果有四个值，它们分别适用于顶，右，底，左四边。

下例中，注释行标出了结果的顶，右，底，左边框的宽度：

H1 { border-width: thin }                   /* thin thin thin thin */H1 { border-width: thin thick }             /* thin thick thin thick */H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 边框颜色： 'border-top-color'，'border-right-color'，'border-bottom-color'，'border-left-color'及'border-color'

边框颜色属性指定了框的边框的颜色。

'border-top-color'，'border-right-color'，'border-bottom-color'，'border-left-color'

值：	<color> \| inherit
初始值：	'color'属性的值
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

'border-color'

值：	<color>{1,4} \| transparent \| inherit
初始值：	见个别属性
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

'border-color'属性设置四个边框的颜色。它的值的含义如下：

<color>: 指定一个颜色值。
transparent: 边框是透明的（尽管它还有宽度）。

'border-color'属性可以有一个到四个值，这些值设置不同的边，方法和'border-width'相同。

如果没有用边框属性指定一个元素的边框颜色，用户端必须用该元素的'color'属性来作为边框颜色的计算值。

下例中，边框是黑色实线。

P {   color: black;   background: white;   border: solid;}

8.5.3 边框样式：'border-top-style'，'border-right-style'，'border-bottom-style'，'border-left-style'及'border-style'

边框样式指定框的边框的线型（实线，双线，点线等）。本节中定义的属性引用<border-style>值类型，取值为：

none: 没有边框。该值迫使'border-width'的计算值为0。 to be '0'.
hidden: 和'none'相似，除非在表格元素中解决边框冲突时。
dotted: 边框是一系列的点。
dashed: 边框是一系列的短线条的段。
solid: 边框是一条单一的线。
double: 边框有两条实线。两条线宽和其中的空白的宽度之和等于'border-width'的值。
groove: 边框看上去好象是雕刻在画布之内。
ridge: 和'grove'相反：边框看上去好象是从画布中凸出来。
inset: 该边框使整个框看上去好象是嵌在画布中。
outset: 和'inset'相反：该边框使整个框看上去好象是从画布中凸出来。

所有的边框画在框的背景之上。'groove'，'ridge'，'inset'和'outset'类型的边框的颜色取决于元素的'color'属性。

和CSS一致的用户端可能将'dotted'，'dashed'，'double'，'groove'，'ridge'，'inset'及'outset'为'solid'。

'border-top-style'，'border-right-style'，'border-bottom-style'，'border-left-style'

值：	<border-style> \| inherit
初始值：	none
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

'border-style'

值：	<border-style>{1,4} \| inherit
初始值：	参见各个别属性
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

'border-style'属性设置四边的样式。它可以有一个到四个值，分别设置不同的边，方法同'border-width'。

#xy34 { border-style: solid dotted }

上例中，水平边框是'solid'而垂直边框是'dotted'。

由于边框样式的初始值是'none'，因此，除非设置了边框样式，没有任何边框可见。

8.5.4 边框缩写属性：'border-top'，'border-bottom'，'border-right'，'border-left'及'border'

'border-top'，'border-right'，'border-bottom'，'border-left'

值：	[ <'border-top-width'> \|\| <'border-style'> \|\| <color> ] \| inherit
初始值：	见各个别属性
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

这是一个设置框的顶底左右边框的宽度，样式和颜色的缩写属性。

H1 { border-bottom: thick solid red }

上面这一规则将设置H1元素底边框的宽度，样式和颜色。省略掉的值将设置为它们各自的初始值。由于下面这一规则并没有指定边框颜色，边框的颜色将由'color'属性指定：

H1 { border-bottom: thick solid }

'border'

值：	[ <'border-width'> \|\| <'border-style'> \|\| <color> ] \| inherit
初始值：	见各个别属性
适用于：	所有元素
可否继承：	否
百分比：	N/A
媒介：	图形

'border'属性是设置框的四个边框为相同的宽度，颜色和样式的缩写属性。和缩写属性'margin'和'padding'不同，'border'属性不可以对四边设置不同的值。要达到这一目的，必须使用另外一个或多个边框属性。

例如，下面的第一条规则等同于跟随其后的四个规则：

P { border: solid red }P {  border-top: solid red;  border-right: solid red;  border-bottom: solid red;  border-left: solid red}

由于在某种程度上，属性具有覆盖的特性，因此指定规则的顺序很重要。

考虑这样一个例子：

BLOCKQUOTE {  border-color: red;  border-left: double;  color: black}

在上例中，左边框的颜色是黑色，而其它边框的颜色是红色。这是因为'border-left'设置了宽度，样式和颜色。由于'border-left'属性并没有给出颜色值，它将从'color'属性中获得值，并与'color'属性设置在'border-left'之后这一事实无关。

层叠样式表CSS2规范之八 包含框模型

8 包含框模型

8.1 框的尺寸

8.2 边距，边白和边框的示例