CSS2/box

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

框模型

English

内容概要


CSS框模型描述了为文档树中的元素而生成的矩形框。这些框会按照视觉格式化模型来排列显示。

框尺寸

每个框都有一个内容区域（例如文本、图像等）及周围可选的内边距、边框和外边距区域；每个区域的大小由以下定义的各属性指定。下图展示了这些区域之间的关系，以及用于描述外边距、边框和内边距片段的相关术语。

boxdim.png

外边距、边框和内边距都可被打散为四个片段，分别位于上、右、下、左。（例如，图中，“LM”指左外边距、“RP”指右内边距、“TB”指上边框等）。

四个区域（内容、内边距、边框和外边距）的每一个边界被称作一个“边缘”，所以每个框都有四个边缘：

  • 内容边缘或内边缘
    内容边缘围绕由框的宽度和高度指定的矩形。该矩形通常与元素的已显示内容决定。四个内容边缘定义了框的内容框。
  • 内边距边缘
    内边距边缘围绕框的内边距。如果内边距宽度为0，则内边距边缘与内容边缘相同。四个内边距边缘定义了框的内边距框。
  • 边框边缘
    边框边缘围绕框的边框。如果边框宽度为0，则边框边缘与内边距边缘相同。四个边框边缘定义了框的边框框。
  • 外边距边缘或外边缘
    外边距边缘围绕框的外边距。如果外边距的宽为0，则外边距边缘与边框边缘相同。四个外边距边缘定义了框的外边距框。

每个边缘都可能会被打散为上、右、下、左的边缘。

一个框之内容区域的大小，即内容宽度和内容高度，由几个因素决定：生成该框的元素是否设置了‘width’或‘height’属性、框是否包含文本或其他框、框是否是一个表格等。框的宽度和高度将在视觉格式化模型细节的章节进行讨论。

一个框的内容、内边距和边框区域的背景样式由生成它的元素的‘background’属性来指定。外边框的背景总是透明的。

外边距（margins）、内边距（padding）和边框（border）的实例

下列HTML文档实例阐述了外边距、内边距和边框之间的相互作用： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>外边距、内边距和边框的实例</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* 没有设置边框 */
      }
      LI { 
        color: white;                /* 文本颜色为白色 */ 
        background: blue;            /* 内容、内边距为蓝色 */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* 注意右内边距为0px */
        list-style: none             /* 列表元素之前没有符号 */
                                     /* 没有设置边框 */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* 所有方向都有边框宽度 */
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>列表的第一个元素
      <LI class="withborder">列表的第二个元素
           为了阐述换行而稍长。
    </UL>
  </BODY>
</HTML>

其结果是在文档树中（除了其他关系）的一个UL元素及其内的两个LI孩子。

下面的第一张图片阐述了该实例将产生的结果。第二章图片阐述了UL元素和其子LI元素的外边距、内边距及边框之间的关系。（图像不成比例。）

boxdimeg.png

注意：

  • 每个LI框的内容宽度是自上至下计算出来的；每个LI框的包含块是由UL元素建立的。
  • 每个LI框的外边距框高度是由其内容高度加上其上下的内边距、边框和外边距的高度得到的。注意LI框之间的垂直外边距会出现折叠。
  • LI框的右内边距被设为零宽度（‘padding’属性）。其效果在第二张图片上较为明显。
  • LI框的外边距是透明的——外边距总是透明的——所以UL内边距和内容区域的背景颜色（黄色）透过这里显露了出来。
  • 第二个LI元素指定了虚线边框（‘border-style’属性）。

外边距属性：‘margin-top’、‘margin-right’、‘margin-bottom’、‘margin-left’和‘margin’

外边距属性指定了框的外边距区域宽度。‘margin’属性简写设置所有四个方向的外边距，而其他外边距属性只设置其各自方向的宽度。这些属性应用于所有元素，但垂直外边距在非替代行内元素上不起作用。

本节定义的属性采用<外边距宽度>的取值类型，它可能是下列取值之一：

<长度>

指定一个固定的宽度。

<百分比>

百分比按照生成框的包含块的宽度计算。
注：这也适用于‘margin-top’和‘margin-bottom’。
如果包含块的宽度依赖于当前元素，则参数的布局在CSS 2.1中是未定义的。

auto（自动）

请查看计算宽度和外边框的章节以了解其效果。

外边框属性允许负值，但特定实现可能会限制其效果。

‘margin-top’、‘margin-bottom’

取值： <外边距宽度> | 继承
初始： 0
適用於： 所有元素，但不包含除表头、表格和行内表格之外的表格显示类型的元素
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 指定为百分比或绝对长度 
这些属性不会影响非替代行内元素。

‘margin-right’、‘margin-left’

取值： <外边距宽度> | 继承
初始： 0
適用於： 所有元素，但不包含除表头、表格和行内表格之外的表格显示类型的元素
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 指定为百分比或绝对长度

这些属性设置框的上、右、下和左外边距。 

h1 { margin-top: 2em }

‘margin’

取值： <外边距宽度>{1,4} | 继承
初始： 查看独立属性
適用於： 所有元素，但不包含除表头、表格和行内表格之外的表格显示类型的元素
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 查看独立属性

‘margin’属性是在样式表内相同位置设置‘margin-top’、‘margin-right’、‘margin-bottom’和‘margin-left’的属性简写。

如果该属性只有一个值，则其适用于所有方向。如果存在两个值，则上和下外边距设为第一个值、右和左外边距设为第二个值。如果存在三个值，则上外边距设为第一个值、左和右外边距设为第二个值、下外边距设为第三个值。如果存在四个值，则以分别设置上、右、下和左外边距。 

body { margin: 2em }         /* 设所有外边距为2em */
body { margin: 1em 2em }     /* 上 & 下 = 1em, 右 & 左 = 2em */
body { margin: 1em 2em 3em } /* 上=1em, 右=2em, 下=3em, 左=2em */

最后一个例子与下面的实例效果相同：

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* 从对面复制（右） */
}

折叠外边距

在CSS中，两个以上的框（可能是兄弟，也可能不是）之间的相邻外边距可以被合并成一个单独的外边距。通过此方式合并的外边距被称为折叠，且产生的已合并的外边距被称为折叠外边距。

相邻垂直外边距合并，除了：

  • 根元素的框的外边距不合并。
  • 如果一个有间隙的元素的上、下外边距相邻，则其外边距将与下面的兄弟的外边距合并，但产生的边距不会与父亲区块的下外边距合并。

水平外边距不会合并。

当且仅当下列情况发生，则称两个外边距相邻：

  • 双方都是同一个块格式化上下文中属于正常排版的块级框。
  • 没有行框、没有间隙、没有内边距且没有边框隔开它们（注意，某些零高度行框（参见9.4.2）会为此被忽略。）
  • 双方的框边缘垂直相邻，例如下列一种形式：
    • 框的上外边距和其属于正常排版的第一个孩子的上外边距。
    • 框的下外边距和其属于正常排版的下一个兄弟的上外边距。
    • 属于正常排版的最后一个孩子的下外边距和其父亲的下外边距，如果其父亲的高度计算值为‘auto’。
    • 框的上、下外边距，如果该框没有建立新的区块格式上下文，且‘min-height’计算值为零、‘height’计算值为零或‘auto’、且没有属于正常排版的孩子。

如果一个外边距的任意外边距部件与折叠外边距相邻，则可认为折叠外边距与该外边距相邻。

注：产生相邻外边距的两个元素不一定是兄弟或祖先的关系。
注：上述规则意味着：
  • 在浮动框和其他框之间的外边距不会折叠（甚至一个浮动框和其属于正常排版的孩子之间也不会出现外边距折叠）。
  • 创建了新块格式化上下文的元素（例如浮动的以及‘overflow’不是‘visible’的元素），不会与其属于正常排版的孩子出现外边距折叠。
  • 绝对定位框的外边距不会折叠（和其属于正常排版的孩子也不折叠）。
  • 行内块框的外边距不会折叠（和其属于正常排版的孩子也不折叠）。
  • 属于正常排版的一个块级元素其下外边距总是与其属于正常排版的下一个块级兄弟的上外边距折叠，除非这两兄弟之间有间隙。
  • 如果属于正常排版的一个块元素没有上边框、上内边距，且其第一个浮动的块级孩子没有间隙，则该元素的上外边距会与其属于正常排版的第一个块级孩子的上外边距折叠。
  • 如果一个‘height’为‘auto’且‘min-height’为零的浮动的块框没有下内边距和下边框，且其属于正常排版的最后一个块级孩子没有与任何其它带间隙的上外边距出现折叠，则该框的下外边距会与该孩子的下外边距折叠。
  • 如果一个框的‘min-height’属性为零，且没有上或下边框以及上或下内边距，且‘height’为0或者‘auto’，且不包含行框，且其属于正常排版的所有孩子的外边距都折叠了，则折叠其外边距。

如果折叠两个以上的外边距，则产生的外边距的宽度是折叠的外边距中宽度的最大值。对于负外边距的情况，会从正的相邻外边距的最大值中扣除负的相邻外边距的绝对值的最大值。如果没有正的外边距，则从零扣除相邻外边距的绝对值的最大值。

如果一个框的上、下外边距相邻，则其外边距可能会穿过它而折叠。在这种情况下，该元素的位置由它与其它外边距被折叠的元素之间的关系决定。

  1. 如果该元素的外边距与其父亲的上外边距折叠，则该框的上边框边缘与其父亲的相同。
  2. 否则，该元素的父亲没有参与外边距折叠或者仅有父亲的下外边距参与。元素上边框边缘的位置与其下边框不为零时相同。

注意，被贯穿而折叠的元素的位置不会影响其他的外边距和其一起折叠的元素的位置；其上边框边缘的位置仅用于定位这些元素的后裔。

内边距属性：‘padding-top’、‘padding-right’、‘padding-bottom’、‘padding-left’和‘padding’

内边距属性指定一个框的内边距框的宽度。‘padding’属性简写设置了四个方向的内边距，而其他内边距属性只会设置其对应的方向。

本节定义的属性采用<内边距宽度>取值类型，它可使用下列取值：

<长度>

指定一个固定的宽度。

<百分比>

百分比按照生成框的包含块的宽度计算。这也适用于‘padding-top’和‘padding-bottom’。如果包含块的宽度依赖于当前元素，则其布局在CSS 2.1中是未定义的。

与外边距属性不同，内边距的值不能为负值。与外边距属性相似，内边距属性的百分比值按照生成框的包含块计算。

‘padding-top’、‘padding-right’、‘padding-bottom’、‘padding-left’

取值： <内边距宽度> | 继承
初始： 0
適用於： 所有元素，但不包含表格行组、表格头部组、表格脚部组、表格行、表格列组合表格列
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 指定为百分比或绝对长度

这些属性设置框的上、右、下和左内边距。 

blockquote { padding-top: 0.3em }

‘padding’

取值： <内边距宽度>{1,4} | 继承
初始： 查看独立属性
適用於： 所有元素，但不包含表格行组、表格头部组、表格脚部组、表格行、表格列组合表格列
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 查看独立属性

‘padding’属性是在样式表内相同位置设置‘padding-top’、‘padding-right’、‘padding-bottom’和‘padding-left’的属性简写。

如果该属性只有一个值，则其适用于所有方向。如果存在两个值，则上和下内边距设为第一个值、右和左内边距设为第二个值。如果存在三个值，则上内边距设为第一个值、左和右内边距设为第二个值、下内边距设为第三个值。如果存在四个值，则以分别设置上、右、下和左内边距。

内边距区域的表面色或图片，由‘background’属性指定： 

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

上面的例子指定了‘1em’的垂直内边距（‘padding-top’和‘padding-bottom’）和‘2em’的水平内边距（‘padding-right’和‘padding-left’）。“em”单位与元素的字号相关：‘1em’与使用中的字体的大小相等。

边框属性

边框属性指定一个框的边框区域的宽度、颜色和样式。这些属性适用于所有元素。

注：由其是对于HTML，用户代理可能会针对有些用户界面元素（例如按钮、菜单等）采取和“普通”元素不同的方式渲染其边框。

边框宽度：‘border-top-width’、‘border-right-width’、‘border-bottom-width’、‘border-left-width’和‘border-width’

边框属性指定一个框的边框框的宽度。本节定义的属性采用<边框宽度>取值类型，它可使用下列取值：

thin（细）

细边框。

medium（中）

中边框。

thick（粗）

粗边框。

<长度>

边框的宽度有一个明确的值。明确的边框宽度不能为负值。

前三个值的解析有用户代理决定。但必须遵守下列关系：

“thin”<=“medium”<=“thick”。

另外，这些宽度必须是贯穿整个文档的常量。

‘border-top-width’、‘border-right-width’、‘border-bottom-width’、‘border-left-width’

取值： <边框宽度> | 继承
初始： medium
適用於： 所有元素
繼承： 否
百分比： N/A
媒介： 视觉
計算值： 绝对长度；如果边框样式为“none”或“hidden”则为“0”

这些属性设置框的上、右、下和左边框。

‘border-width’

取值： <边框宽度>{1,4} | 继承
初始： 查看独立属性
適用於： 所有元素
繼承： 否
百分比： N/A
媒介： 视觉
計算值： 查看独立属性

‘border-width’属性是在样式表内相同位置设置‘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 */

边框颜色：‘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’

取值： <颜色> | transparent（透明） | 继承
初始： “color”属性的值
適用於： 所有元素
繼承： 否
百分比： N/A
媒介： 视觉
計算值： 若从“color”属性获取，则为‘color’的计算值；否则为指定的值

‘border-color’

取值： [ <颜色> | transparent（透明）]{1,4} | 继承
初始： 查看独立属性
適用於： 所有元素
繼承： 否
百分比： N/A
媒介： 视觉
計算值： 查看独立属性

‘border-color’属性设置了四个边框的颜色，其值由如下意义：

<颜色>

指定一个颜色值。

transparent（透明）

边框透明（即使其可能会拥有一定宽度）。

‘border-color’属性可以拥有一到四个值，这些值与‘border-width’属性相似地设置不同的方向。

如果没有通过边框属性指定一个元素的边框颜色，则用户代理必须使用元素的‘color’属性的值作为其边框颜色的计算值。 

在下面的例子中，边框是一个实黑线。

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

边框样式：‘border-top-style’、‘border-right-style’、‘border-bottom-style’、‘border-left-style’和‘border-style’

边框样式属性指定框的边框的线样式（实线、双线、虚线等）。本节定义的属性采用<边框样式>取值类型，它可使用下列取值：

none

没有边框；边框宽度计算值为零。

hidden

与‘none’相同，但表格元素的边框冲突解决方法不同。

dotted

边框为一串点。

dashed

边框为一串短线段。

solid

边框为一条线段。

double

边框为两条实线。两条线及其间空白的总和等于‘border-width’的值。

groove

边框看起来像是雕刻在画布上。

ridge

与‘groove’相反：边框看起来像是漂浮在画布之上。

inset

边框使框看起来像是嵌入在画布里面。

outset

与‘inset’相反：边框使框看起来像是漂浮在画布之上。

所有的边框都绘制在框的背景之上。绘制值为‘groove’、‘ridge’、‘inset’和‘outset’的边框时的颜色由元素的边框颜色属性决定，但用户代理可能会根据自己的算法选择实际使用的颜色。例如，如果‘border-color’的值为‘silver’，则用户代理可以使用一个从白色到暗灰色的渐变表示一个倾斜的边框。

‘border-top-style’、‘border-right-style’、‘border-bottom-style’、‘border-left-style’

取值： <边框样式> | 继承
初始： none
適用於： 所有元素
繼承： 否
百分比： N/A
媒介： 视觉
計算值： 按照指定

‘border-style’

取值： <边框样式>{1,4} | 继承
初始： 查看独立属性
適用於： 所有元素
繼承： 否
百分比： N/A
媒介： 视觉
計算值： 查看独立属性

‘border-style’属性设置四个边框的样式。其可以拥有一到四个值，这些值与‘border-width’属性相似地设置不同的方向。 

#xy34 { border-style: solid dotted }

在上面的例子中，水平边框为‘solid’、垂直边框为‘dotted’。

由于边框样式的默认值是‘none’，因此除非设置了边框样式，否则所有边框均不可见。

边框属性简写：‘border-top’、‘border-right’、‘border-bottom’、‘border-left’和‘border’

‘border-top’、‘border-right’、‘border-bottom’、‘border-left’

取值： [ <边框宽度> | | <边框样式> | | <'边框颜色'> ] | 继承
初始： 查看独立属性
適用於： 所有元素
繼承： 否
百分比： N/A
媒介： 视觉
計算值： 查看独立属性

这是设置一个框的上、右、下和左边框的宽度、样式和颜色的属性简写。 

h1 { border-bottom: thick solid red }

上面的规则将设置H1元素下面的边框的宽度、样式和颜色。忽略的值将被设为其初始值。因为下面的规则没有指定边框的颜色，所有边框的颜色将由‘color’属性指定： 

H1 { border-bottom: thick solid }

‘border’

取值： [ <边框宽度> | | <边框样式> | | <'边框颜色'> ] | 继承
初始： 查看独立属性
適用於： 所有元素
繼承： 否
百分比： 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: solid red;
  border-left: double;
  color: black;
}

在上面的例子中，左边框的颜色为blcak，而其他边框的颜色为red。这是由于‘border-left’设置了宽度、样式和颜色。由于‘border-left’属性没有给出颜色值，则其使用了‘color’属性的值。事实上‘color’属性是否在‘border-left’属性之后设置都没有关系。

行内元素在双向上下文中的框模型

对于每个行框，用户代理必须把为各元素生成的每个行内框按照视觉顺序（而不是逻辑顺序）显示其外边距、边框和内边距。

若元素的‘direction’属性为‘ltr’，则该元素所呈现的第一个行框的最左边生成的框拥有左外边距、左边框和左内边距；该元素所呈现的最后一个行框的最右边生成的框拥有右内边距、右边框和右外边距。

若元素的‘direction’属性为‘rtl’，则该元素所呈现的第一个行框的最右边生成的框拥有右内边距、右边框和右外边距；该元素所呈现的最后一个行框的最左边生成的框拥有左外边距、左边框和左内边距。

下一章：视觉格式化模型

Retrieved from "https://www.w3.org/html/ig/zh/wiki/index.php?title=CSS2/box&oldid=5203"