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

最新推荐文章于 2024-10-31 14:03:24 发布

qinxike

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量970

点赞数

分类专栏：网页设计文章标签： css 图形 border html 文档 list

网页设计专栏收录该内容

7 篇文章 0 订阅

订阅专栏

8 包含框模型

http://www.seodugu.com/css2/box.html

主目录:http://www.dimlau.com/very/css/cover.html#minitoc

CSS包含框模型描述了文档树中元素产生的长方形包含框，它们根据可视化格式模型来布局。页面框是一类特殊的框，它的描述见页面介质一章。

8.1 框的尺寸

每一个框都有一个内容区（如文本，图形等等）以及可选的环绕在周围的边白，边框以及边距区域；每个区域的尺寸由下面讨论的属性规定。下面这张图展示了这些区域如何相互关联，以及用来引用边距，边框和边白等部分的术语：

Image illustrating the relationship between content, padding, borders, and margins. [D]

边距，边框和边白可以细分为左右顶底四部分（例如，在图形中，"LM"代表左边距，"RP"代表右边白，"TB"代表顶边框，等等）。

四个区域（内容，边白，边框和边距）的每一个边界称为一个“边”，因此，每一个框有四条边：

内容边或内边

内容边包围元素的经渲染的内容。

边白边

边白边围绕框的边白。如果边白宽度为0，则边白边和内容边重合。框的边白边定义了有框生成的包含块的边。

边框边

边框边围绕框的边框。如果边框宽度为0，边框边和边白边重合。

边距边或外边

边距边围绕框的边距。如果边距宽度为0，边距边和边框边重合。

每一个边可以细分为左右顶底四类。

框的内容区尺寸——内容宽度和内容高度——取决于若干个因素：产生框的元素是否设置了'width'或'height'属性，框是否包含文本或其它框，框是否是一个表格等等。框的宽度和高度讨论，参见可视化格式模型的细节一章。

框的宽度由左右边距、左右边框、左右边白和内容的宽度相加得到。高度由顶底边距、顶底边框、顶底边白和内容的高度相加得到。

框的不同区域的背景样式是这样决定的：

内容区：产生该区域的元素的'background'属性。
边白区：产生该区域的元素的'background'属性。
边框区：产生该区域的元素的边框属性。
边距区：边距总是透明的。

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

这个例子展示了边距，边白和边框是如何相互作用的。样本HTML文档如下：

<!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'之后这一事实无关。

qinxike

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

8 包含框模型

8.1 框的尺寸

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

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

8.3.1 边距重合

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

8.5 边框属性

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

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

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

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

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