CSS2/visudet/zh-hans

From HTML5 Chinese Interest Group Wiki
< CSS2‎ | visudet
Jump to: navigation, search

视觉布局模型细节

English
繁體版

内容概要

包含块的定义

English

一个元素的框的尺寸和位置有时会相对于某个特定的矩形来计算，该矩形称为这个元素的包含块。一个元素的包含块的定义如下:

  1. 根元素的包含块是一个矩形称作初始包含块.对于连续媒体,它具有视口的尺寸并且锚定在canvas的原点;对于分页媒体来说它是页面区域.初始包含块的'direction'属性和根元素一样Note.png.
  2. 对于其它元素,如果元素的position值是'relative' 或者 'static',包含块由最近的块容器的祖先盒子Note.png的内容边界形成.
  3. 如果元素设置了'position: fixed'，包含块将由连续媒体的视口或分页媒体的页面区域创建Question.png.

  4. 如果元素设置了'position: absolute',包含块由距离最近的，'position'是'absolute', 'relative' 或者 'fixed'的祖先元素Note.png通过以下方式创建:

    1. 在祖先是行内元素的情况下,包含块是绕着第一个和最后一个行内盒子的padding盒子的(为该元素生成的)边界盒.在CSS 2.1中,如果行内元素分跨多行,包含块是未定义的.
    2. 否则, 由祖先的填充边缘形成.

    如果没有这样的祖先元素,包含块是初始包含块.

在分页媒体中,一个绝对定位的元素会相对于它的包含块进行定位并忽略任何页面中断符(将文档视作连续的).该元素可能会被随后的多个页面拆分.

对于一段绝对定位的内容，如果解析后的位置位于除已经完成布局的页面(当前页)的其它页面，或是位于当前页(为了打印而早已经渲染完毕),打印机可能将该内容放置于

  • 在当前页面的另一个位置,
  • 在随后的页面,或者
  • 可能忽略它.
注：注意一个分跨多页的块级元素可能在每个页面都有一个不同的宽度且它们可能受特定设备限制.
在元素没有设置定位的情况下，下面文档的各包含块（C.B.）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>包含块的阐释</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">这是第一个段落里的字…</P> <P id="p2">这是<EM id="em1">第 <STRONG id="strong1">二</STRONG>个段落里</EM>的字。</P> </DIV> </BODY> </HTML>

由以下方式建立：

由元素 X 生成的盒的包含块由元素 Y 建立
html初始 C.B.
bodyhtml
div1body
p1div1
p2div1
em1p2
strong1p2

如果我们给 "div1" 定位：

#div1 { position: absolute; left: 50px; top: 50px }

则其包含块不再是 "body" ― 变成初始包含块（因为没有其他的定位祖先盒）。

如果我们也给 "em1" 定位：

#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }

则包含块的对应表变成：

由元素 X 生成的盒的包含块由元素 Y 建立
html初始 C.B.Note.png
bodyhtml
div1初始 C.B.
p1div1
p2div1
em1div1
strong1em1
定位了 "em1" 之后，其包含块变成最近的定位祖先盒（也就是 "div1" 生成的那个）。

内容宽度 ― 'width' 属性

'width'

取值： <length> | <percentage> | auto | inherit
初始： auto
適用於： 除了非置换行内元素、表格行、行群组以外的所有元素
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 同指定的百比比值或 'auto' ，不然就是绝对长度。
English

本属性可以用来指定盒的内容宽度。

本属性不适用于非置换行内元素。非置换行内元素的盒的内容宽度是盒里面会进行渲染的内容的宽度（在子盒进行任何的相对偏移“之前”）Note.png。请注意行内盒流入行盒里，行盒的宽度由包含块决定，但是可能因为浮动的出现而被缩短。

各取值的意义如下：

<length>

使用长度单位指定内容区域的宽度。

<percengage>

指定百分比宽度。百分比值的计算相对于元素所生成的盒的包含块的宽度。若包含块的宽度取决于这个元素的宽度，则此布局结果在 CSS 2.1 里未定义。对于包含块由块容器元素而来的绝对定位元素，百分比值的计算相对于元素“边距盒”的宽度。这与百分比宽度的计算总是相对于父元素“内容盒”的 CSS1 不同。

auto

宽度由其他属性的值决定。参见以下各小节。

负值在 'width' 上不合法。

举例来说，下面规则将段落的内容宽度固定在 100 像素宽： p { width: 100px }

计算宽度与边界

一个元素用来布局的 'width'、'margin-left'、'margin-right'、'left'、'right' 属性值取决于生成的盒种类，也取决于彼此。（布局用的值有时候也叫做使用值。）原理上，使用值是把计算值的 'auto' 取代成适合的值，并以包含块计算百分比值，不过也有例外。以下状况必须分开讨论Bug.png：

  1. 行内非置换元素
  2. 行内置换元素
  3. 常规流中的块级非置换元素
  4. 常规流中的块级置换元素
  5. 浮动非置换元素
  6. 浮动置换元素
  7. 绝对定位非置换元素
  8. 绝对定位置换元素
  9. 常规流中的 'inline-block' 非置换元素
  10. 常规流中的 'inline-block' 置换元素

对于情况 1-6 与 9-10 的相对定为元素，'left' 与 'right' 的值由 9.4.3 小节的规则决定。

注：下面计算出的 'width' 的使用值不一定是最后结果，有可能根据 'min-width' 与 'max-width' 计算很多次，参见下面的《宽度最小值与最大值》小节。

行内非置换元素

'width' 属性不适用。若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。

行内置换元素

English

若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'

若 'height' 与 'width' 的计算值皆为 'auto' 且元素有固有宽度，则 'width' 的使用值为该固有宽度。

若以下条件之一发生 1) 'height' 与 'width' 的计算值皆为 'auto' 且元素有没有固有宽度，但是有固有高度与固有长宽比。2) 若 'width' 的计算值为 'auto' 且 'height' 有别的计算值，而且元素具有固有长宽比。则，'width' 的使用值为：

（高度使用值） * （固有长宽比）

若 'height' 与 'width' 的计算值皆为 'auto' 且元素具有固有长宽比但是没有固有高度或宽度，则 CSS 2.1 未定义 'width' 的使用值。然而，本规范建议若包含块的宽度本身与置换元素的宽度无关，则用户代理该用对于常规流中的块级非置换元素的公式计算 'width' 的使用值。

否则，若 'width' 的计算值为 'auto' 且元素具有固有宽度，则 'width' 的使用值为该固有宽度。

否则，若 'width' 的计算值为 'auto' 且上述条件完全不符，则 'width' 的使用值为 300px。若 300px 对装置太宽，则用户代理应该使用能够嵌进设备的最大的 2:1 比例的长方形的宽作为 'width' 的使用值。

常规流中的块级非置换元素

English

以下拘束必须在这些属性的使用值中成立：

'margin-left' + 'border-left-width' + padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含块的宽度

若 'width' 不是 'auto' 且 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width'（加上不是 'auto' 的 'margin-left' 与 'margin-right'）比包含块的宽度还大，则在以下规则中，将 'margin-left' 与 'margin-right' 的 'auto' 值视为零。

若所有以上属性的计算值皆不为 'auto'，则本规范称这些值的情况作“过拘束”，而其中一个属性的使用值会与其计算值不同。若包含块的 'direction' 属性为 'ltr'，则用户代理会忽略 'margin-right' 的指定值，且将该值计算成让等式成立的值。若 'direction' 的值是 'rtl'，则上述情况改在 'margin-left' 上发生。

若恰好只有一个值被指定为 'auto'，则该使用值由等式求出Note.png。

若 'width' 设为 'auto'，则其他 'auto' 值变成 '0' 且 'width' 由等式求出。

若 'margin-left' 与 'margin-right' 都是 'auto'，则他们的使用值相等。这会将元素水平置中在包含块的边之间。

常规流中的块级置换元素

'width' 的使用值照行内置换元素的方式决定。然后使用块级非置换元素的规则决定边界。

浮动非置换元素

English

若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。

若 'width' 的计算值为 'auto'，则使用值为“收缩适应宽度”。

收缩适应宽度的计算与使用自动表格布局算法理表格单元宽度的计算类似。粗略说法：先以“不在直接断行以外的地方断行”的方式排版内容，将此宽度定义为首选宽度，再使用所有可能的断行以计算首选“最小”宽度Note.png。CSS 2.1 不定义完整的算法。再来，找到“可用宽度”：在这种情况下，这是包含块的宽度减 'margin-left'、'border-left-width'、'padding-left'、'padding-right'、'border-right-width'、'margin-right' 的使用值，再减任何相关卷轴的宽度。

然后收缩适应宽度为：min(max(首选最小宽度, 可用宽度), 首选宽度) Idea.png。

浮动置换元素

若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。'width' 的使用值照行内置换元素的方式决定。

绝对定位非置换元素

English

在本小节与下一小节中，术语（一个元素的）“静态位置”大约是指元素在常规流的时候会在的位置。更精确的说：

  • 静态位置包含块是假设元素 'position' 的指定值是 'static' 且 'float' 的指定值是 'none' 的时候的第一个盒Note.png的包含块。（请注音因为有 9.7 小节的规则，这个假设性的计算可能也会让假想盒 'display' 的计算值有所不同。）
  • 'left' 的静态位置是包含块的左边到假设元素 'position' 的指定值是 'static' 且 'float' 的指定值是 'none' 的时候Note.png的第一个盒的左边界边的距离。若假想盒在包含块的左边则此值为负。
  • 'right' 的静态位置是包含块的右边到上述假想盒的右边界的距离。若假想盒在包含块的左边则此值为正。

用户代理也可以用猜的决定可能的位置而不是真的计算假想盒的布局情形。

在计算静态位置的过程中，固定定位元素的包含块是初始包含块而不是视口，且所有可卷动的盒都假设已卷动到原点。

决定这些属性使用值得拘束为：

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 包含块的宽度

若 'left'、'width' 与 'right' 三个属性都为 'auto'：先将 'margin-left' 与 'margin-right' 的 'auto' 值设为 '0'。再来，若建立静态位置包含块的元素的 'direciton' 属性为 'ltr'，则将 'left' 设为静态位置并使用下面的规则编号三。否则，将 'right' 设为静态位置并使用下面的规则编号一。

若三个属性没有一个是 'auto'：若 'margin-left' 和 'margin-right' 都是 'auto'，以两个边界相等为条件解方程式，但是若这会让边界为负，则若包含块的方向是 'ltr'（'rtl'），则设 'margin-left'（'margin-right'）为零并解出 'margin-right'（'margin-left'）。若 'margin-left' 或 'margin-right' 其一为 'auto'，解方程式以得到该值。若这些值过拘束，则忽略 'left'（在包含块的 'direction' 属性是 'rtl' 情形）或 'right'（'direction' 是 'ltr' 的情形）的值并解出该值。

否则，将 'margin-left' 与 'margin-right' 的 'auto' 值设为 '0'，并选出以下六个规则中适用的那一个。

  1. 若 'left' 与 'width' 是 'auto' 且 'right' 不是 'auto'，则宽度是收缩适应宽度。然后解 'left'。
  2. 若 'left' 与 'right' 是 'auto' 且 'width' 不是 'auto'，若建立静态位置包含块的元素的 'direciton' 属性为 'ltr'，则将 'left' 设为静态位置，否则，将 'right' 设为静态位置。然后解出 'left'（若 'direction' 是 'rtl'）或 'right'（若 'direction' 是 'ltr'）。
  3. 若 'width' 与 'right' 是 'auto' 且 'left' 不是 'auto'，则宽度是收缩适应宽度。然后解 'right'。
  4. 若 'left' 是 'auto' 且 'width' 与 'right' 不是 'auto'，则解出 'left'。
  5. 若 'width' 是 'auto' 且 'left' 与 'right' 不是 'auto'，则解出 'width'。
  6. 若 'right' 是 'auto' 且 'left' 与 'width' 不是 'auto'，则解出 'right'。

收缩适应宽度的计算与使用自动表格布局算法理表格单元宽度的计算类似。粗略说法：先以“不在直接断行以外的地方断行”的方式排版内容，将此宽度定义为首选宽度，再使用所有可能的断行以计算首选“最小”宽度。CSS 2.1 不定义完整的算法。再来，找到“可用宽度”：这可以在将 'left'（情况 1）或 'right' 设为 '0'（情况 3）之后，解出 'width' 而得到。

然后收缩适应宽度为：min(max(首选最小宽度, 可用宽度), 首选宽度)。

绝对定位置换元素

English

10.3.7 小节到拘束方程式为止（包括方程式）在这种情况下仍适用，但是 10.3.7 小节剩下的部份由下列规则取代：

  1. 'width' 的使用值照行内置换元素的方式决定。若 'margin-left' 或 'margin-right' 的指定值为 'auto' 则其使用值按下面规则决定。
  2. 若 'left' 与 'right' 的值都是 'auto'，则若建立静态位置包含块的元素的 'direciton' 属性为 'ltr'，则将 'left' 设为静态位置，否则若 'direction' 是 'rlt'，将 'right' 设为静态位置。
  3. 若 'left' 或 'right' 是 'auto'，则将 'margin-left' 与 'margin-right' 的 'auto' 值以 '0' 取代。
  4. 在这里若 'margin-left' 与 'margin-right' 仍都是 'auto'，以两个边界相等为条件解方程式，但是若这会让边界为负，则若包含块的方向是 'ltr'（'rtl'），则设 'margin-left'（'margin-right'）为零并解出 'margin-right'（'margin-left'）。
  5. 在这里若仍剩有一个 'auto'，以方程式解出该值。
  6. 在这里若值过拘束，则忽略 'left'（在包含块的 'direction' 属性是 'rtl' 情形）或 'right'（'direction' 是 'ltr' 的情形）的值并解出该值。

常规流中的 'inline-block' 非置换元素

若 'width' 是 'auto'，则其使用值与浮动元素一样是收缩适应宽度Bug.png。

若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。

常规流中的 'inline-block' 置换元素

与行内置换元素完全相同。

宽度最小值与最大值 ― 'min-width' 与 'max-width' 属性

'min-width'

取值： <length> | <percentage> | inherit
初始： 0
適用於： 除了非置换行内元素、表格行、行群组以外的所有元素
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 同指定值的百比比值或绝对长度。

'max-width'

取值： <length> | <percentage> | none | inherit
初始： none
適用於： 除了非置换行内元素、表格行、行群组以外的所有元素
繼承： 否
百分比： 相对于包含块的宽度
媒介： 视觉
計算值： 同指定值的百比比值或绝对长度或 'none'。
English

这两个属性让网页作者限制内容宽度于某一个特定的范围。各取值的意义如下：

<length>

指定一个固定的最小或最大使用宽度。

<percengage>

指定百分比值。百分比值的计算相对于元素所生成的盒的包含块的宽度。若包含块的宽度为负，则使用值为零Question.png。若包含块的宽度取决于这个元素的宽度，则此布局结果在 CSS 2.1 里未定义。

auto

（仅可用在 'max-width' 上）盒的宽度没有限制。

负值在 'min-width' 与 'max-width' 上不合法。

在 CSS 2.1 里，'min-width' 与 'max-width' 在表格、行内表格、表格单元、表格列与列群组上的效果未定义Idea.png。

以下算法描述这两个属性如何影响 'width' 属性的指定值：

  1. 先从上面《计算宽度与边界》里的规则算出（不使用 'min-width' 与 'max-width'）使用宽度的可能值。
  2. 若可能的使用宽度大于 'max-width'，再次使用上面的规则，不过这次使用 'max-width' 的计算值Note.png作为 'width' 的计算值。
  3. 若上面的结果小于 'min-width'，再次使用上面的规则，不过这次使用 'min-width' 的值作为 'width' 的计算值。
注：这些步骤不影响上述属性的真实计算值。

然而，对于具有固有长宽比Bug.png且 'width' 与 'height' 的指定值皆为 'auto' 的置换元素，使用的算法如下：

从表格合适的约束违反情况找到解出来的高度与宽度值。在其中，将 max-width 与 max-height 定为 max(min, max)，始其满足 min ≦ max。表格中 w 与 h 代表忽略 'min-width'、'min-height'、'max-width'、'max-height' 计算出来宽度与高度结果，一般这是固有宽度与高度，但是在置换元素有固有长宽比的情况下可能不是这样Note.png。

注：在宽度或高度其中一个有设置且另一个为 'auto' 的情况下，在 'auto' 的那边使用最小或最大限制会造成过拘束的状况。本规范在这种行况下的行为有清楚叙述Note.png，但是这可能不是网页作者预期的结果。在这种情抗下使用 CSS3 的 'object-fit' 属性可能得到不同的结果Idea.png
违反的拘束 解出来的宽度 解出来的高度
无 w h
w > max-width max-width max(max-width * h/w, min-height)
w < min-width min-width min(min-width * h/w, max-height)
h > max-height max(max-height * w/h, min-width) max-height
h < min-height min(min-height * w/h, max-width) min-height
(w > max-width) 且 (h > max-height)，其中 (max-width/w ≦ max-height/h) max-width max(min-height, max-width * h/w)
(w > max-width) 且 (h > max-height)，其中 (max-width/w > max-height/h) max(min-width, max-height * w/h) max-height
(w < min-width) 且 (h < min-height)，其中 (min-width/w ≦ min-height/h) min(max-width, min-height * w/h) min-height
(w < min-width) 且 (h < min-height)，其中 (min-width/w > min-height/h) min-width min(max-height, min-width * h/w)
(w < min-width) 且 (h > max-height) min-width max-height
(w > max-width) 且 (h < min-height) max-width min-height

然后将 'width' 的计算值当成此值，使用上面《计算宽度与边界》里的规则。

内容高度 ― 'height' 属性

'height'

取值： <length> | <percentage> | auto | inherit
初始： auto
適用於： 除了非置换行内元素、表格列、列群组以外的所有元素
繼承： 否
百分比： 参考叙述
媒介： 视觉
計算值： 百比比值或 'auto'（参考 <percentage> 下的叙述）或绝对长度。
English

本属性可以用来指定盒的内容高度。

本属性不适用于非置换行内元素。请参考《计算行内非置换元素的高度与边界》小节以获得用户代理在这种情形使用的规则。

各取值的意义如下：

<length>

使用长度单位指定内容区域的高度。

<percengage>

指定百分比高度。百分比值的计算相对于元素所生成的盒的包含块的高度。若包含块没有明确指定的高度（也就是，高度取决于内容的高度），且元素非绝对定位元素，则计算值为 'auto'Bug.png。在根元素上的百分比高度相对于初始包含块。对于包含块由块容器元素而来的绝对定位元素，百分比值的计算相对于元素“边距盒”的高度。这个行为与百分比高度的计算总是相对于父元素“内容盒”的 CSS1 不同。

auto

宽度由其他属性的值决定。参见以下各小节。
注：请注意一个绝对定位元素的包含块的高与元素本身的大小无关，因此这种元素上的百分比高度总是可以解出。然而，高度可能在用户代理处理在后面的元素之前无法知道。

负值在 'height' 上不合法。

举例来说，下面规则将各段落的内容高度设为 100 像素：

p { height: 100px }

内容高度超过 100 像素的段落会根据 'overflow' 属性溢出。

计算高度与边界

为了计算 'top'、'margin-top'、'height'、'margin-bottom'、'bottom' 的值，以下各种盒的种类必须分开讨论Note.png：

  1. 行内非置换元素
  2. 行内置换元素
  3. 常规流中的块级非置换元素
  4. 常规流中的块级置换元素
  5. 浮动非置换元素
  6. 浮动置换元素
  7. 绝对定位非置换元素
  8. 绝对定位置换元素
  9. 常规流中的 'inline-block' 非置换元素
  10. 常规流中的 'inline-block' 置换元素

对于情况 1-6 与 9-10 的相对定为元素，'top' 与 'bottom' 的使用值由 9.4.3 小节的规则决定。

注：这些规则同时适用于根元素，与其他元素没有区别。
注：下面计算出的 'height' 的使用值不一定是最后结果，有可能根据 'min-height' 与 'max-height' 计算很多次，参见下面的《高度最小值与最大值》小节。

行内非置换元素

English

'height' 属性不适用。用户代理应该由字体决定内容区域的高度，但是本规范没指定如何进行。举例来说，用户代理可用 EM-盒或字体的最大升部与降部Question.png。（后者可以确保有部份在 EM-盒之上或之下的字形仍在内容区域内，但是会让不同的字体有不同大小的盒。前者可以确保网页作者可以控制相对于 'line-height' 的背景样式Question.png，但是会造成用户代理把字形画在内容区域之外。）

注：CSS 等级三多半会引入用来选择字体的哪个参数作为内容高度参考的属性Idea.png

行内非置换盒的垂直边距、边框和边界从内容区域的顶边与底边开始，与 'line-height' 无关。用户代理只用 'line-height' 来计算行盒的高度。

本规范为定义网页作者使用超过一个字体（这可能发生在用户代理从不同字体找出字形的时候）的时候内容区域的高度。然而，我们建议高度刚好够放得下 (1) EM-盒 (2)“所有”在元素里的字体的最大升部与降部。请注意这可能大于所有在元素内的字体大小，取决于字体的基线对齐。

行内置换元素、常规流中的块级置换元素与浮动置换元素

English

若 'margin-top' 或 'margin-bottom' 的计算值为 'auto'，则其使用值为 '0'

若 'height' 与 'width' 的计算值皆为 'auto' 且元素有固有高度，则 'height' 的使用值为该固有高度。

否则，若 'height' 的计算值为 'auto' 且元素具有固有长宽比。则，'height' 的使用值为：

（宽度使用值） / （固有长宽比）Note.png

否则，若 'height' 的计算值为 'auto' 且元素具有固有高度，则 'height' 的使用值为该固有高度。

否则，若 'height' 的计算值为 'auto' 且上述条件完全不符，则 'height' 的使用值必须是高度不能大于 150px，且宽度不能大于设备宽度的最大的 2:1 比例长方形的高Note.png。

常规流中 'overflow' 的计算值为 'visible' 的块级非置换元素

English

本小节也适用于常规流中 'overflow' 的计算值不为 'visible' 但是 'overflow' 被传给视口的块级非置换元素Question.png。

若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。若 'height' 是 'auto'，则高度取决于元素有没有块级元素与它有没有边距或边框Note.png：

元素的高度是从其顶内容边到以下第一个符合条件的边：

  1. 若盒建立一个一行以上的行内格式划上下文，边是最后一个行盒的底边。
  2. 若最后一个流内子盒的底边界不与元素的底边界折叠，边是该子盒的底边（有可能已折叠Question.png）。
  3. 边是顶边界不与元素的底边界折叠的最后一个流内子盒的底边框边。
  4. 否则，零Note.png。

只有在常规流的子盒会被算在内（也就是，用户代理会忽略浮动盒或是绝对定位盒，并且不考虑相对定位盒的偏移）。请注意子盒可能是无名块盒。

绝对定位非置换元素

English

在本小节与下一小节中，术语（一个元素的）“静态位置”大约是指元素在常规流的时候会在的位置。更精确的说，'top' 的静态位置是从包含块的顶边到假设元素 'position' 的指定值是 'static'、'float' 的指定值是 'none'、'clear' 的指定值是 'none' 的时候的第一个盒的顶边界边的距离Note.png。（请注音因为有 9.7 小节的规则，这个假设性的计算可能也会让假想盒 'display' 的计算值有所不同。）若假想盒在包含块的上边则此值为负。

用户代理也可以用猜的决定可能的位置而不是真的计算假想盒的布局情形。

在计算静态位置的过程中，固定定位元素的包含块是初始包含块而不是视口Note.png。

对于绝对定位元素，垂直大小的使用值必须满足这个条件：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 包含块的高度

若 'top'、'height' 与 'bottom' 三个属性都为 'auto'，则将 'top' 设为静态位置并使用以下规则编号三。

若三个属性没有一个是 'auto'：若 'margin-top' 和 'margin-bottom' 都是 'auto'，以两个边界相等为条件解方程式Moz.png。若 'margin-top' 或 'margin-bottom' 其一为 'auto'，解方程是以得到该值。若这些值过拘束，忽略 'bottom' 的值并解出该值。

否则，选出以下六个规则中适用的那一个。

  1. 若 'top' 与 'height' 是 'auto' 且 'bottom' 不是 'auto'，则高度根据 10.6.7 由内容决定，然后将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'top'。
  2. 若 'top' 与 'bottom' 是 'auto' 且 'height' 不是 'auto'，则将 'top' 设为静态位置，然后将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'bottom'。
  3. 若 'height' 与 'bottom' 是 'auto' 且 'top' 不是 'auto'，则高度根据 10.6.7 由内容决定，然后将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'bottom'。
  4. 若 'top' 是 'auto' 且 'height' 与 'bottom' 不是 'auto'，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'top'。
  5. 若 'height' 是 'auto' 且 'top' 与 'bottom' 不是 'auto'，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'height'。
  6. 若 'bottom' 是 'auto' 且 'top' 与 'height' 不是 'auto'，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'bottom'。

绝对定位置换元素

English

除了元素具有固有高度以外，这种情况跟前一个很像。'auto' 的替换顺序变成：

  1. 'height' 的使用值照行内置换元素的方式决定。若 'margin-top' 或 'margin-top' 的指定值为 'auto' 则其使用值按下面规则决定。
  2. 若 'top' 与 'bottom' 的值都是 'auto'，则将 'top' 以静态位置取代。
  3. 若 'bottom' 是 'auto'Bug.png，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值以 '0' 取代。
  4. 在这里若 'margin-top' 与 'margin-bottom' 仍都是 'auto'，以两个边界相等为条件解方程式，但是若这会让边界为负，则若包含块的方向是 'ltr'（'rtl'），则设 'margin-left'（'margin-right'）为零并解出 'margin-right'（'margin-left'）。
  5. 在这里若仍剩有一个 'auto'，以方程式解出该值。
  6. 在这里若值过拘束，则忽略 'bottom' 的值并解出该值。

复杂情形

本小节适用于：

  • 常规流中 'overflow' 的计算值不为 'visible' 的块级非置换元素（除了 'overflow' 属性的值被传给视口的元素）。
  • 'inline-block' 非置换元素。
  • 浮动非置换元素。

若 'margin-top' 或 'margin-bottom' 的计算值为 'auto'，则其使用值为 '0'。若 'height' 是 'auto'，则高度根据 10.6.7 由元素的子嗣决定。

用户代理会将 'inline-block' 元素的边界盒用在行盒高度的计算之中。

块格式化上下文根的 'auto' 高度

English

在特定情况下Note.png（参见，例：上面的 10.6.4 小节与 10.6.6 小节），建立块格式化上下文的元素高度的计算方式如下：

若元素只有行内子盒，则高度是从最顶端的行盒的顶边到最底端行盒的底边的距离。

若元素只有块级子盒，则高度是从最顶端的块级子盒的顶边界边到最底端子盒的底边界边的距离。

用户代理会忽略绝对定位盒，并且不考虑相对定位盒的偏移。请注意子盒可能是无名块盒。

另外，若元素有底边界边比元素的底内容边还低的浮动子嗣Note.png，则高度会增加到包含这些边Note.png。只有参与这个块格式化上下文的浮动盒会算在内，也就是，在绝对定位子嗣Note.png或其他浮动之内的浮动不会被算在内。

高度最小值与最大值 ― 'min-height' 与 'max-height' 属性

'min-height'

取值： <length> | <percentage> | inherit
初始： 0
適用於： 除了非置换行内元素、表格列、列群组以外的所有元素
繼承： 否
百分比： 参考叙述
媒介： 视觉
計算值： 同指定值的百比比值或绝对长度。

'max-height'

取值： <length> | <percentage> | none | inherit
初始： none
適用於： 除了非置换行内元素、表格列、列群组以外的所有元素
繼承： 否
百分比： 参考叙述
媒介： 视觉
計算值： 同指定值的百比比值或绝对长度或 'none'。
English

这两个属性让网页作者限制内容高度于某一个特定的范围。各取值的意义如下：

<length>

指定一个固定的最小或最大高度计算值Question.png。

<percengage>

指定百分比用来决定使用值。百分比值的计算相对于元素所生成的盒的包含块的高度。若包含块没有明确指定的高度（也就是，高度取决于内容的高度），且元素非绝对定位元素，则用户代理将百分比值视为 '0'（'min-height'）或 'none'（'max-height'）。

none

（仅可用在 'max-height' 上）盒的高度没有限制。

负值在 'min-height' 与 'max-height' 上不合法。

在 CSS 2.1 里，'min-height' 与 'max-height' 在表格、行内表格、表格单元、表格行与行群组上的效果未定义。

以下算法描述这两个属性如何影响 'height' 属性的指定值：

  1. 先从上面《计算高度与边界》里的规则算出（不使用 'min-height' 与 'max-height'）使用高度的可能值。
  2. 若可能的使用高度大于 'max-height'，再次使用上面的规则，不过这次使用 'max-height' 的值作为 'height' 的计算值。
  3. 若上面的结果小于 'min-height'，再次使用上面的规则，不过这次使用 'min-height' 的值作为 'height' 的计算值。
注：这些步骤不影响上述属性的真实计算值。除了在《边界折叠》（8.3.1）里特别提到的关于 'min-height' 与 'max-height' 的规则，上面对于 'height' 使用值得更动对边界折叠没有影响。

然而，若元素是 'width' 与 'height' 的计算值都是 'auto' 的置换元素，则使用上面《宽度最小值与最大值》之下的算法找到宽度与高度的使用值，再将这些值当作计算值使用《计算高度与边界》之下的规则。

行高计算 ― 'line-height' 与 'vertical-align' 属性

English

如同在行内格式化上下文的小节描述的一样，用户代理将行内级盒流入垂直堆叠的行盒内。行盒的高度由下面步骤决定：

  1. 计算行盒里的各行内级盒的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界盒的高度，对于行内盒来说，这时其 'line-height'。（参见《计算高度与边界》与《Leading 与半 Leading》里的行内盒的高度。）
  2. 行内级元素根据其 'vertical-align' 属性垂直对齐。在这些盒使用 'top' 或 'bottom' 对齐的情况下，用户代理必须以最小化行盒的高为目标对齐这些盒。若这些盒够高，则存在多个解而 CSS 2.1 不定义行盒基线的位置（也就是支撑的位置，参见下文）Question.png。
  3. 行盒的高是最顶端盒的顶边到最底端盒的底边的距离。（这包括支撑，在 'line-height' 下面解释。）

空白行内元素生成空白行内盒，但是这些盒仍有边界、边距、边框与行高，也因此跟会影响有内容的元素一样会影响这些计算。

Leading 与半 Leading

English

CSS 假设每一个字体都带有一个在基线之上的特征高度与在基线之下的特征深度。在本小节里我们用 A 代表（一个字体里一个大小的）高度，用 D 代表深度。我们也定义 AD = A + D 为从顶边到底边的距离。（参见下面如何在 TrueType 与 OpenType 字体里找到 A 与 D 的注解。）请注意这些字体的讯息是整个字体拥有的，并不一定代表任何个别字形的升部与降部。

在一个飞至换行内盒里，用户代理必须用字形的基线对齐字形。然后，为每一个字形决定 A 与 D。请注意单一个元素里的字形可能从不同字体而来也因此不见得有相同的 A 与 D。若行内盒里完全没有字形，本规范将它视为含有一个支撑（零宽的隐形字形），其 A 与 D 是元素的第一个可用字体。

然后，为每一个字形决定要加的 leading L，其中 L = 'line-height' - AD。半个 leading 加在 A 之上，另外一半加在 D 之下，使得字形的 leading 有在基线以上的全高度 A' = A + L/2 与全深度 D' = D + L/2。

注：L 可以是负的。

行内盒Note.png覆盖了所有字形与其两边的半 leading，也因此高正好是 'line-height'。子元素的何不影响这个高度。

虽然非置换行内元素的边界、边框、边距不会影响行盒的计算，用户代理仍会在行内盒周围渲染这些构造。这代表若 'line-height' 指定的高比含有的盒的内容高度还小，则背景与边距、边框的颜色Question.png可能“渗入”相邻的行盒。用户代理应该以文档顺序渲染这些盒，这会让后面行的边框画在前面行的边框与文字之上。

注：CSS 2.1 没定义行内河的内容区域为何（参见上面 10.6.1），也因此不同的用户代理可能会把背景与边框画在不同的地方。
注：本规范建议使用 OpenType 或 TrueType 的实现使用字体 OS/2 表格的 "sTypoAdcender" 与 "sTypoDescender" 资料来找出 A 与 D（要放大至当前元素的字体大小）。在缺少这些资料的情况下，应该用 HHEA 表格里的 "Ascent" 与 "Descent" 资料。

'line-height'

取值： normal | <number> | <length> | <percentage> | inherit
初始： normal
適用於： 所有元素
繼承： 是
百分比： 相对于元素本身的字体大小
媒介： 视觉
計算值： <length> 与 <percentage> 的计算值为绝对值，其他同指定值。

在内容由行内级元素组成的块容器元素上，'line-height' 可以用来指定元素里行盒的“最小”高度。最小高度由基线之上的最小高度与基线之下的最小深度组成，就如同每一个行盒由一个零宽，具有原来元素的字体与行高属性的行内盒开始。我们称这个假想何为“支撑”（命名灵感从 TeX 而来。）

本规范假设字体在基线之上与之下的高度与深度的资讯在字体里面。（参加 CSS 等级三以获得详情。）

在非置换行内元素上，'line-height' 可以用来指定用来计算行盒高度的高度。

各取值的意义如下：

normal

让用户代理根据元素的字体将使用值设为一个“合理”的值。这个值与 <number> 的意义相同。我们推荐 'normal 的使用值在 1.0 到 1.2 之间。计算值是 'normal'。

<length>

用户代理会在行盒高度的计算中使用指定的长度。负值不合法。

<number>

属性的使用值是这个数字乘上元素的字体大小的值。负值不合法。计算值与指定值相同。

<percentage>

属性的计算值是这个百分比值乘上元素的字体大小计算值得结果。负值不合法。
以下范例中的三个规则有相同的行高： div { line-height: 1.2; font-size: 10pt } /* 数字 */ div { line-height: 1.2em; font-size: 10pt } /* 长度 */ div { line-height: 120%; font-size: 10pt } /* 百分比 */

当一个元素包含需要以超过一个字体渲染的文字的时候，用户代理可用最大的字体大小决定 'normal' 'line-height'。

注：当一个块容器合理的所有行内盒的 'line-height' 值只有一个，且所有行盒有相同的字体（而且没有置换元素、行内块元素等等），上面条件确保相邻两行的基线正好相隔 'line-height'。这对于多栏有不同字体的文字需要对齐的时候（例如在表格中）很重要。

'vertical-align'

取值： baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
初始： baseline
適用於： 行内级元素与 'table-cell'
繼承： 否
百分比： 相对于元素本身的 'line-height'
媒介： 视觉
計算值： <percetage> 与 <length> 的计算值为绝对值，其他同指定值。
English

本属性可以用来影响一个行内级元素生成的合在一个行合理的垂直定位。

注：本属性的值在表格中有不同的意义。详情请参考表格高度算法小节。

以下的值仅相对于父行内元素或是父块容器元素的支撑有意义。

在下面定义中，对于行内非置换元素，用来对齐的盒是高度为 'line-height' 的盒（包含盒的字形与两边的半 leading，参见上面）。对于其它元素，用来对齐的盒是边界盒。

baseline

将盒的基线与父盒的基线对。若盒没有基线，将底边界边与父盒的基线对齐。

middle

将盒的垂直中心点与父盒的基线加半个父盒的 x-高对齐。

sub

将盒的基线下降到父盒的适合下标的位置。（这个直对元素文字的字体大小没有效果。）

super

将盒的基线上升到父盒的适合上标的位置。（这个直对元素文字的字体大小没有效果。）

text-top

将盒的顶边与父盒内容边的顶边对齐（参见 10.6.1）。

text-bottom

将盒的底边与父盒内容边的底边对齐（参见 10.6.1）。

<percengage>

将盒上升（正值）或下降（负值）这个距离（'line-height' 的百分比）。'0%' 与 'baseline' 相同。

<length>

将盒上升（正值）或下降（负值）这个距离。'0cm' 与 'baseline' 相同。

以下的值将元素相对于行盒对齐。由于元素可能有相对其对齐的子元素（这些子元素又有相对于它们对齐的子嗣），这些值使用对齐子树的边界。一个行内元素的对齐子树包含该元素与其所有 'vertical-align' 的计算值不为 'top' 或 'bottom' 的子行内元素的对齐子树。对齐子树的顶边是在子树中的盒的顶边里面最高的边，对齐子树的底边的定义类似。

top

将对齐子树的顶边与行盒的顶边对齐。

bottom

将对齐子树的底边与行盒的底边对齐。

'inline-table' 的基线是表格第一行的基线。

若 'inline-block' 没有流内行盒或其 'overflow' 属性的计算值不是 'visible' 则基线是底边界边，否则 'inline-block' 的基线是常规流里最后一个行盒的基线。

Retrieved from "https://www.w3.org/html/ig/zh/wiki/index.php?title=CSS2/visudet/zh-hans&oldid=4437"