Warning:
This wiki has been archived and is now read-only.
CSS2/visudet/zh-hans
视觉布局模型细节
内容概要
- 10.1 包含块的定义
- 10.2 内容宽度 ― 'width' 属性
- 10.3 计算宽度与边界
- 10.3.1 行内非置换元素
- 10.3.2 行内置换元素
- 10.3.3 常规流中的块级非置换元素
- 10.3.4 常规流中的块级置换元素
- 10.3.5 浮动非置换元素
- 10.3.6 浮动置换元素
- 10.3.7 绝对定位非置换元素
- 10.3.8 绝对定位置换元素
- 10.3.9 常规流中的 'inline-block' 非置换元素
- 10.3.10 常规流中的 'inline-block' 置换元素
- 10.4 宽度最小值与最大值 ― 'min-width' 与 'max-width' 属性
- 10.5 内容高度 ― 'height' 属性
- 10.6 计算高度与边界
- 10.6.1 行内非置换元素
- 10.6.2 行内置换元素、常规流中的块级置换元素与浮动置换元素
- 10.6.3 常规流中 'overflow' 的计算值为 'visible' 的块级非置换元素
- 10.6.4 绝对定位非置换元素
- 10.6.5 绝对定位置换元素
- 10.6.6 复杂情形
- 10.6.7 块格式化上下文根的 'auto' 高度
- 10.7 高度最小值与最大值 ― 'min-height' 与 'max-height' 属性
- 10.8 行高计算 ― 'line-height' 与 'vertical-align' 属性
包含块的定义
一个元素的框的尺寸和位置有时会相对于某个特定的矩形来计算，该矩形称为这个元素的包含块。一个元素的包含块的定义如下:
- 根元素的包含块是一个矩形称作初始包含块.对于连续媒体,它具有视口的尺寸并且锚定在canvas的原点;对于分页媒体来说它是页面区域.初始包含块的'direction'属性和根元素一样Error creating thumbnail: Unable to save thumbnail to destination.
- 对于其它元素,如果元素的position值是'relative' 或者 'static',包含块由最近的块容器的祖先盒子Error creating thumbnail: Unable to save thumbnail to destination的内容边界形成.
- 如果元素设置了'position: fixed'，包含块将由连续媒体的视口或分页媒体的页面区域创建Error creating thumbnail: Unable to save thumbnail to destination.
-
如果元素设置了'position: absolute',包含块由距离最近的，'position'是'absolute', 'relative' 或者 'fixed'的祖先元素
Error creating thumbnail: Unable to save thumbnail to destination通过以下方式创建:- 在祖先是行内元素的情况下,包含块是绕着第一个和最后一个行内盒子的padding盒子的(为该元素生成的)边界盒.在CSS 2.1中,如果行内元素分跨多行,包含块是未定义的.
- 否则, 由祖先的填充边缘形成.
如果没有这样的祖先元素,包含块是初始包含块.
在分页媒体中,一个绝对定位的元素会相对于它的包含块进行定位并忽略任何页面中断符(将文档视作连续的).该元素可能会被随后的多个页面拆分.
对于一段绝对定位的内容，如果解析后的位置位于除已经完成布局的页面(当前页)的其它页面，或是位于当前页(为了打印而早已经渲染完毕),打印机可能将该内容放置于
- 在当前页面的另一个位置,
- 在随后的页面,或者
- 可能忽略它.
<!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. |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
如果我们给 "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. Error creating thumbnail: Unable to save thumbnail to destination |
| body | html |
| div1 | 初始 C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
内容宽度 ― 'width' 属性
'width'
| 取值： | <length> | <percentage> | auto | inherit |
| 初始： | auto |
| 適用於： | 除了非置换行内元素、表格行、行群组以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 相对于包含块的宽度 |
| 媒介： | 视觉 |
| 計算值： | 同指定的百比比值或 'auto' ，不然就是绝对长度。 |
本属性可以用来指定盒的内容宽度。
本属性不适用于非置换行内元素。非置换行内元素的盒的内容宽度是盒里面会进行渲染的内容的宽度（在子盒进行任何的相对偏移“之前”）各取值的意义如下：
auto
负值在 'width' 上不合法。
p { width: 100px } 计算宽度与边界
一个元素用来布局的 'width'、'margin-left'、'margin-right'、'left'、'right' 属性值取决于生成的盒种类，也取决于彼此。（布局用的值有时候也叫做使用值。）原理上，使用值是把计算值的 'auto' 取代成适合的值，并以包含块计算百分比值，不过也有例外。以下状况必须分开讨论
：
- 行内非置换元素
- 行内置换元素
- 常规流中的块级非置换元素
- 常规流中的块级置换元素
- 浮动非置换元素
- 浮动置换元素
- 绝对定位非置换元素
- 绝对定位置换元素
- 常规流中的 'inline-block' 非置换元素
- 常规流中的 'inline-block' 置换元素
对于情况 1-6 与 9-10 的相对定为元素，'left' 与 'right' 的值由 9.4.3 小节的规则决定。
行内非置换元素
'width' 属性不适用。若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。
行内置换元素
若 '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' 的使用值。
常规流中的块级非置换元素
以下拘束必须在这些属性的使用值中成立：
若 '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'，则该使用值由等式求出若 'width' 设为 'auto'，则其他 'auto' 值变成 '0' 且 'width' 由等式求出。
若 'margin-left' 与 'margin-right' 都是 'auto'，则他们的使用值相等。这会将元素水平置中在包含块的边之间。
常规流中的块级置换元素
'width' 的使用值照行内置换元素的方式决定。然后使用块级非置换元素的规则决定边界。
浮动非置换元素
若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。
若 'width' 的计算值为 'auto'，则使用值为“收缩适应宽度”。
收缩适应宽度的计算与使用自动表格布局算法理表格单元宽度的计算类似。粗略说法：先以“不在直接断行以外的地方断行”的方式排版内容，将此宽度定义为首选宽度，再使用所有可能的断行以计算首选“最小”宽度浮动置换元素
若 'margin-left' 或 'margin-right' 的计算值为 'auto'，则其使用值为 '0'。'width' 的使用值照行内置换元素的方式决定。
绝对定位非置换元素
在本小节与下一小节中，术语（一个元素的）“静态位置”大约是指元素在常规流的时候会在的位置。更精确的说：
- 静态位置包含块是假设元素 'position' 的指定值是 'static' 且 'float' 的指定值是 'none' 的时候的第一个盒Error creating thumbnail: Unable to save thumbnail to destination的包含块。（请注音因为有 9.7 小节的规则，这个假设性的计算可能也会让假想盒 'display' 的计算值有所不同。）
- 'left' 的静态位置是包含块的左边到假设元素 'position' 的指定值是 'static' 且 'float' 的指定值是 'none' 的时候Error creating thumbnail: Unable to save thumbnail to destination的第一个盒的左边界边的距离。若假想盒在包含块的左边则此值为负。
- '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'，并选出以下六个规则中适用的那一个。
- 若 'left' 与 'width' 是 'auto' 且 'right' 不是 'auto'，则宽度是收缩适应宽度。然后解 'left'。
- 若 'left' 与 'right' 是 'auto' 且 'width' 不是 'auto'，若建立静态位置包含块的元素的 'direciton' 属性为 'ltr'，则将 'left' 设为静态位置，否则，将 'right' 设为静态位置。然后解出 'left'（若 'direction' 是 'rtl'）或 'right'（若 'direction' 是 'ltr'）。
- 若 'width' 与 'right' 是 'auto' 且 'left' 不是 'auto'，则宽度是收缩适应宽度。然后解 'right'。
- 若 'left' 是 'auto' 且 'width' 与 'right' 不是 'auto'，则解出 'left'。
- 若 'width' 是 'auto' 且 'left' 与 'right' 不是 'auto'，则解出 'width'。
- 若 'right' 是 'auto' 且 'left' 与 'width' 不是 'auto'，则解出 'right'。
收缩适应宽度的计算与使用自动表格布局算法理表格单元宽度的计算类似。粗略说法：先以“不在直接断行以外的地方断行”的方式排版内容，将此宽度定义为首选宽度，再使用所有可能的断行以计算首选“最小”宽度。CSS 2.1 不定义完整的算法。再来，找到“可用宽度”：这可以在将 'left'（情况 1）或 'right' 设为 '0'（情况 3）之后，解出 'width' 而得到。
然后收缩适应宽度为：min(max(首选最小宽度, 可用宽度), 首选宽度)。
绝对定位置换元素
10.3.7 小节到拘束方程式为止（包括方程式）在这种情况下仍适用，但是 10.3.7 小节剩下的部份由下列规则取代：
- 'width' 的使用值照行内置换元素的方式决定。若 'margin-left' 或 'margin-right' 的指定值为 'auto' 则其使用值按下面规则决定。
- 若 'left' 与 'right' 的值都是 'auto'，则若建立静态位置包含块的元素的 'direciton' 属性为 'ltr'，则将 'left' 设为静态位置，否则若 'direction' 是 'rlt'，将 'right' 设为静态位置。
- 若 'left' 或 'right' 是 'auto'，则将 'margin-left' 与 'margin-right' 的 'auto' 值以 '0' 取代。
- 在这里若 'margin-left' 与 'margin-right' 仍都是 'auto'，以两个边界相等为条件解方程式，但是若这会让边界为负，则若包含块的方向是 'ltr'（'rtl'），则设 'margin-left'（'margin-right'）为零并解出 'margin-right'（'margin-left'）。
- 在这里若仍剩有一个 'auto'，以方程式解出该值。
- 在这里若值过拘束，则忽略 'left'（在包含块的 'direction' 属性是 'rtl' 情形）或 'right'（'direction' 是 'ltr' 的情形）的值并解出该值。
常规流中的 'inline-block' 非置换元素
若 'width' 是 'auto'，则其使用值与浮动元素一样是收缩适应宽度。
若 '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'。 |
这两个属性让网页作者限制内容宽度于某一个特定的范围。各取值的意义如下：
auto
负值在 'min-width' 与 'max-width' 上不合法。
在 CSS 2.1 里，'min-width' 与 'max-width' 在表格、行内表格、表格单元、表格列与列群组上的效果未定义以下算法描述这两个属性如何影响 'width' 属性的指定值：
- 先从上面《计算宽度与边界》里的规则算出（不使用 'min-width' 与 'max-width'）使用宽度的可能值。
- 若可能的使用宽度大于 'max-width'，再次使用上面的规则，不过这次使用 'max-width' 的计算值Error creating thumbnail: Unable to save thumbnail to destination作为 'width' 的计算值。
- 若上面的结果小于 'min-width'，再次使用上面的规则，不过这次使用 'min-width' 的值作为 'width' 的计算值。
然而，对于具有固有长宽比且 'width' 与 'height' 的指定值皆为 'auto' 的置换元素，使用的算法如下：
| 违反的拘束 | 解出来的宽度 | 解出来的高度 |
|---|---|---|
| 无 | 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> 下的叙述）或绝对长度。 |
本属性可以用来指定盒的内容高度。
本属性不适用于非置换行内元素。请参考《计算行内非置换元素的高度与边界》小节以获得用户代理在这种情形使用的规则。
各取值的意义如下：
。在根元素上的百分比高度相对于初始包含块。对于包含块由块容器元素而来的绝对定位元素，百分比值的计算相对于元素“边距盒”的高度。这个行为与百分比高度的计算总是相对于父元素“内容盒”的 CSS1 不同。auto
负值在 'height' 上不合法。
计算高度与边界
为了计算 'top'、'margin-top'、'height'、'margin-bottom'、'bottom' 的值，以下各种盒的种类必须分开讨论- 行内非置换元素
- 行内置换元素
- 常规流中的块级非置换元素
- 常规流中的块级置换元素
- 浮动非置换元素
- 浮动置换元素
- 绝对定位非置换元素
- 绝对定位置换元素
- 常规流中的 'inline-block' 非置换元素
- 常规流中的 'inline-block' 置换元素
对于情况 1-6 与 9-10 的相对定为元素，'top' 与 'bottom' 的使用值由 9.4.3 小节的规则决定。
行内非置换元素
'height' 属性不适用。用户代理应该由字体决定内容区域的高度，但是本规范没指定如何进行。举例来说，用户代理可用 EM-盒或字体的最大升部与降部行内非置换盒的垂直边距、边框和边界从内容区域的顶边与底边开始，与 'line-height' 无关。用户代理只用 'line-height' 来计算行盒的高度。
本规范为定义网页作者使用超过一个字体（这可能发生在用户代理从不同字体找出字形的时候）的时候内容区域的高度。然而，我们建议高度刚好够放得下 (1) EM-盒 (2)“所有”在元素里的字体的最大升部与降部。请注意这可能大于所有在元素内的字体大小，取决于字体的基线对齐。
行内置换元素、常规流中的块级置换元素与浮动置换元素
若 'margin-top' 或 'margin-bottom' 的计算值为 'auto'，则其使用值为 '0'
若 'height' 与 'width' 的计算值皆为 'auto' 且元素有固有高度，则 'height' 的使用值为该固有高度。
否则，若 'height' 的计算值为 'auto' 且元素具有固有长宽比。则，'height' 的使用值为：
否则，若 'height' 的计算值为 'auto' 且元素具有固有高度，则 'height' 的使用值为该固有高度。
否则，若 'height' 的计算值为 'auto' 且上述条件完全不符，则 'height' 的使用值必须是高度不能大于 150px，且宽度不能大于设备宽度的最大的 2:1 比例长方形的高常规流中 'overflow' 的计算值为 'visible' 的块级非置换元素
本小节也适用于常规流中 'overflow' 的计算值不为 'visible' 但是 'overflow' 被传给视口的块级非置换元素元素的高度是从其顶内容边到以下第一个符合条件的边：
- 若盒建立一个一行以上的行内格式划上下文，边是最后一个行盒的底边。
- 若最后一个流内子盒的底边界不与元素的底边界折叠，边是该子盒的底边（有可能已折叠Error creating thumbnail: Unable to save thumbnail to destination）。
- 边是顶边界不与元素的底边界折叠的最后一个流内子盒的底边框边。
- 否则，零Error creating thumbnail: Unable to save thumbnail to destination。
只有在常规流的子盒会被算在内（也就是，用户代理会忽略浮动盒或是绝对定位盒，并且不考虑相对定位盒的偏移）。请注意子盒可能是无名块盒。
绝对定位非置换元素
在本小节与下一小节中，术语（一个元素的）“静态位置”大约是指元素在常规流的时候会在的位置。更精确的说，'top' 的静态位置是从包含块的顶边到假设元素 'position' 的指定值是 'static'、'float' 的指定值是 'none'、'clear' 的指定值是 'none' 的时候的第一个盒的顶边界边的距离用户代理也可以用猜的决定可能的位置而不是真的计算假想盒的布局情形。
在计算静态位置的过程中，固定定位元素的包含块是初始包含块而不是视口对于绝对定位元素，垂直大小的使用值必须满足这个条件：
若 'top'、'height' 与 'bottom' 三个属性都为 'auto'，则将 'top' 设为静态位置并使用以下规则编号三。
若三个属性没有一个是 'auto'：若 'margin-top' 和 'margin-bottom' 都是 'auto'，以两个边界相等为条件解方程式否则，选出以下六个规则中适用的那一个。
- 若 'top' 与 'height' 是 'auto' 且 'bottom' 不是 'auto'，则高度根据 10.6.7 由内容决定，然后将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'top'。
- 若 'top' 与 'bottom' 是 'auto' 且 'height' 不是 'auto'，则将 'top' 设为静态位置，然后将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'bottom'。
- 若 'height' 与 'bottom' 是 'auto' 且 'top' 不是 'auto'，则高度根据 10.6.7 由内容决定，然后将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'bottom'。
- 若 'top' 是 'auto' 且 'height' 与 'bottom' 不是 'auto'，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'top'。
- 若 'height' 是 'auto' 且 'top' 与 'bottom' 不是 'auto'，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'height'。
- 若 'bottom' 是 'auto' 且 'top' 与 'height' 不是 'auto'，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值设为 '0' 并解出 'bottom'。
绝对定位置换元素
除了元素具有固有高度以外，这种情况跟前一个很像。'auto' 的替换顺序变成：
- 'height' 的使用值照行内置换元素的方式决定。若 'margin-top' 或 'margin-top' 的指定值为 'auto' 则其使用值按下面规则决定。
- 若 'top' 与 'bottom' 的值都是 'auto'，则将 'top' 以静态位置取代。
- 若 'bottom' 是 'auto'，则将 'margin-top' 与 'margin-bottom' 的 'auto' 值以 '0' 取代。
- 在这里若 'margin-top' 与 'margin-bottom' 仍都是 'auto'，以两个边界相等为条件解方程式，但是若这会让边界为负，则若包含块的方向是 'ltr'（'rtl'），则设 'margin-left'（'margin-right'）为零并解出 'margin-right'（'margin-left'）。
- 在这里若仍剩有一个 'auto'，以方程式解出该值。
- 在这里若值过拘束，则忽略 'bottom' 的值并解出该值。
复杂情形
本小节适用于：
- 常规流中 'overflow' 的计算值不为 'visible' 的块级非置换元素（除了 'overflow' 属性的值被传给视口的元素）。
- 'inline-block' 非置换元素。
- 浮动非置换元素。
若 'margin-top' 或 'margin-bottom' 的计算值为 'auto'，则其使用值为 '0'。若 'height' 是 'auto'，则高度根据 10.6.7 由元素的子嗣决定。
用户代理会将 'inline-block' 元素的边界盒用在行盒高度的计算之中。
块格式化上下文根的 'auto' 高度
在特定情况下若元素只有行内子盒，则高度是从最顶端的行盒的顶边到最底端行盒的底边的距离。
若元素只有块级子盒，则高度是从最顶端的块级子盒的顶边界边到最底端子盒的底边界边的距离。
用户代理会忽略绝对定位盒，并且不考虑相对定位盒的偏移。请注意子盒可能是无名块盒。
另外，若元素有底边界边比元素的底内容边还低的浮动子嗣高度最小值与最大值 ― 'min-height' 与 'max-height' 属性
'min-height'
| 取值： | <length> | <percentage> | inherit |
| 初始： | 0 |
| 適用於： | 除了非置换行内元素、表格列、列群组以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 参考叙述 |
| 媒介： | 视觉 |
| 計算值： | 同指定值的百比比值或绝对长度。 |
'max-height'
| 取值： | <length> | <percentage> | none | inherit |
| 初始： | none |
| 適用於： | 除了非置换行内元素、表格列、列群组以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 参考叙述 |
| 媒介： | 视觉 |
| 計算值： | 同指定值的百比比值或绝对长度或 'none'。 |
这两个属性让网页作者限制内容高度于某一个特定的范围。各取值的意义如下：
none
负值在 'min-height' 与 'max-height' 上不合法。
在 CSS 2.1 里，'min-height' 与 'max-height' 在表格、行内表格、表格单元、表格行与行群组上的效果未定义。
以下算法描述这两个属性如何影响 'height' 属性的指定值：
- 先从上面《计算高度与边界》里的规则算出（不使用 'min-height' 与 'max-height'）使用高度的可能值。
- 若可能的使用高度大于 'max-height'，再次使用上面的规则，不过这次使用 'max-height' 的值作为 'height' 的计算值。
- 若上面的结果小于 'min-height'，再次使用上面的规则，不过这次使用 'min-height' 的值作为 'height' 的计算值。
然而，若元素是 'width' 与 'height' 的计算值都是 'auto' 的置换元素，则使用上面《宽度最小值与最大值》之下的算法找到宽度与高度的使用值，再将这些值当作计算值使用《计算高度与边界》之下的规则。
行高计算 ― 'line-height' 与 'vertical-align' 属性
如同在行内格式化上下文的小节描述的一样，用户代理将行内级盒流入垂直堆叠的行盒内。行盒的高度由下面步骤决定：
- 计算行盒里的各行内级盒的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界盒的高度，对于行内盒来说，这时其 'line-height'。（参见《计算高度与边界》与《Leading 与半 Leading》里的行内盒的高度。）
- 行内级元素根据其 'vertical-align' 属性垂直对齐。在这些盒使用 'top' 或 'bottom' 对齐的情况下，用户代理必须以最小化行盒的高为目标对齐这些盒。若这些盒够高，则存在多个解而 CSS 2.1 不定义行盒基线的位置（也就是支撑的位置，参见下文）Error creating thumbnail: Unable to save thumbnail to destination。
- 行盒的高是最顶端盒的顶边到最底端盒的底边的距离。（这包括支撑，在 'line-height' 下面解释。）
空白行内元素生成空白行内盒，但是这些盒仍有边界、边距、边框与行高，也因此跟会影响有内容的元素一样会影响这些计算。
Leading 与半 Leading
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。
'line-height'
| 取值： | normal | <number> | <length> | <percentage> | inherit |
| 初始： | normal |
| 適用於： | 所有元素 |
| 繼承： | 是 |
| 百分比： | 相对于元素本身的字体大小 |
| 媒介： | 视觉 |
| 計算值： | <length> 与 <percentage> 的计算值为绝对值，其他同指定值。 |
在内容由行内级元素组成的块容器元素上，'line-height' 可以用来指定元素里行盒的“最小”高度。最小高度由基线之上的最小高度与基线之下的最小深度组成，就如同每一个行盒由一个零宽，具有原来元素的字体与行高属性的行内盒开始。我们称这个假想何为“支撑”（命名灵感从 TeX 而来。）
本规范假设字体在基线之上与之下的高度与深度的资讯在字体里面。（参加 CSS 等级三以获得详情。）
在非置换行内元素上，'line-height' 可以用来指定用来计算行盒高度的高度。
各取值的意义如下：
normal
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'。
'vertical-align'
| 取值： | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| 初始： | baseline |
| 適用於： | 行内级元素与 'table-cell' |
| 繼承： | 否 |
| 百分比： | 相对于元素本身的 'line-height' |
| 媒介： | 视觉 |
| 計算值： | <percetage> 与 <length> 的计算值为绝对值，其他同指定值。 |
本属性可以用来影响一个行内级元素生成的合在一个行合理的垂直定位。
以下的值仅相对于父行内元素或是父块容器元素的支撑有意义。
在下面定义中，对于行内非置换元素，用来对齐的盒是高度为 'line-height' 的盒（包含盒的字形与两边的半 leading，参见上面）。对于其它元素，用来对齐的盒是边界盒。
baseline
middle
sub
super
text-top
text-bottom
以下的值将元素相对于行盒对齐。由于元素可能有相对其对齐的子元素（这些子元素又有相对于它们对齐的子嗣），这些值使用对齐子树的边界。一个行内元素的对齐子树包含该元素与其所有 'vertical-align' 的计算值不为 'top' 或 'bottom' 的子行内元素的对齐子树。对齐子树的顶边是在子树中的盒的顶边里面最高的边，对齐子树的底边的定义类似。
top
bottom
'inline-table' 的基线是表格第一行的基线。
若 'inline-block' 没有流内行盒或其 'overflow' 属性的计算值不是 'visible' 则基线是底边界边，否则 'inline-block' 的基线是常规流里最后一个行盒的基线。