CSS规范>10视觉格式化模型详述VisualFormattingModelDetails_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS规范>10视觉格式化模型详述VisualFormattingModelDetails_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含22396字，纯文字阅读大概需要32分钟。
内容图文
原文：http://www.w3.org/TR/CSS2/visudet.html
译者注：本文未全文翻译（最近要校招找工作，所以学习压力大，先挑重头，所以暂省略了最大最小宽度高度两部分）。文中部分内容和配图是我自己的理解，但没有一一标注。此外，文中有许多术语，我都有在后面注明原英文。最后要吐槽以下，vertical-align 属性在各浏览器中的兼容性真是跪了，如果读者有了解这个兼容性问题，请务必留言解惑！之后我也会抽空解决这个属性问题哒！
10.1 “包含块”的定义
元素的盒的位置和大小有时会根据某一矩形来计算，该矩形被称为该元素的包含块。一个元素的包含块定义如下：
根元素所在的包含块是一个被称为初始包含块 Initial Containing Block 的矩形，在连续媒体中，其尺寸为视口大小，其基点为画布原点。在分页媒体中，初始包含块即为页面区域 Page Area。初始包含块的 direction 属性与根元素的一致。
对于其他元素而言，如果元素 position 为 relative 或 static，其包含块为最近的块容器祖先盒的内容边缘。
如果元素有 position: fixed，其包含块由连续媒体中的视口或分页媒体中的页面区域创建。
如果元素有 position: absolute，在以下情况下，其包含块由 position 值为 absolute，relative，fixed 的最近祖先创建：
如果该祖先元素为行内元素，包含块即围绕着为该元素生成的第一个和最后一个行内盒的内边距盒的边界盒。在CSS2.1中，如果该行内元素分跨多行，则包含块未定义。
否则，包含块由该祖先元素的内边距边缘构成。
如果没有这样的祖先元素，包含块即初始包含块。
在分页媒体中，一个绝对定位元素相对于其包含块定位，并忽略所有的换页（如同文档是连续的）。该元素可能随后被打断而分布在几个页面之中。
对于绝对定位内容，如果解析为页面上的一个位置而不是正在布局的页面（当前页面），或解析为已经为打印而渲染出来的当前页面的一个位置，打印机可能将该内容放置于：
当前页的其他位置
下一页，或者
省略该内容
注意：一个分布在多页的块级元素在每页的宽度可能不同，并且可能会存在设备特定限制。
在没有定位的情况下，下面文档：
Illustration of containing blocks This is text in the first paragraph...
This is text in the second paragraph.
的包含块如下建立：
生成盒子的元素 => 生成包含块的元素
html => 初始包含块（依赖于用户代理）
body => html
div1 => body
p1 => div1
p2 => div1
em1 => p2
strong1 => p2
如果我们给 div1 定位：
#div { position: absolute; left: 50px; top: 50px;} 其包含块就不再是 body 了；包含块现在成了初始包含块（因为没有别的定位了的祖先盒）。
如果我们同样给 em1 定位：
#div1 { position: absolute; left: 50px; top: 50px;}#em1 { position: absolute; left: 100px; top: 100px;} 生成盒表格变成了：
生成盒子的元素 => 生成包含块的元素
html => 初始包含块（依赖于用户代理）
body => html
div1 => 初始包含块
p1 => div1
p2 => div1
em1 => div1
strong1 => em1
给 em1 定位后，其包含块变成了最近的定位了的祖先盒（即 div 生成的盒）。
10.2 内容宽度：width 属性
译者注：属性介绍略，可查CSS手册
该属性指定盒的内容宽度。
该属性不适用于不可替换行内元素。不可替换行内元素的盒的宽度即（在子元素的任何相对位置之前）其中渲染内容的宽度。回想下，行内盒是排进行盒的。行盒的宽度由其包含块给予，但可能因浮动而缩小。
属性值有如下意义：
长度
指定一个长度单位的内容区域宽度。
百分比
指定一个百分比宽度。百分比根据生成盒的包含块的宽度计算。CSS2.1中，如果包含块的宽度依赖于该元素的宽度，那么布局结果为未定义。注意：对于包含块是基于一个块容器元素的绝对定位元素而言，百分比是根据该块容器元素的内边距盒的宽度计算的。这是对CSS1的修改，CSS1中百分比宽度始终根据父元素的内容盒计算。
auto
宽度取决于其他属性。参见下文。
负值的 width 非法。
例如，下面的规则将段落的内容宽度改成100像素。
p { width: 100px } 10.3 计算宽度和外边距
元素用于布局的 width、margin-left、margin-right、left 以及 right 属性，其值取决于生成盒的类型以及属性彼此。（布局所采用的值有时被称为使用值）。基本上，使用值同计算值一致，是把计算值 auto 替换为某些适当值，而百分比根据包含块计算，但也有例外。需要辨析下列情形：
行内不可替换元素
行内可替换元素
常规流中块级不可替换元素
常规流中块级可替换元素
浮动不可替换元素
浮动可替换元素
绝对定位不可替换元素
绝对定位可替换元素
常规流中行内块不可替换元素
10. 常规流中行内块可替换元素
1-6点和9-10点中，相对定位元素的 left 和 right 值根据9.4.3章节规则计算。
注意：下面计算出的 width 的使用值不一定是最终结果，视 min-width 和 max-width，有可能必须多次计算，参见本章下述的最小和最大宽度。
10.3.1 行内不可替换元素
width 值无效。margin-left 和 margin-right 的 auto 计算值转换为使用值 0。
10.3.2 行内可替换元素
margin-left 和 margin-right 的 auto 计算值转换为使用值 0。
如果 height 和 width 计算值均为 auto并且该元素有固有宽度，那么固有宽度即 width 的使用值。
如果 height 和 width 计算值均为 auto并且该元素没有固有宽度，但有固有高度和固有比例；或者如果 width 计算值为 auto，height 有其他计算值，并且元素有固有比例；那么 width 的使用值为：
高度使用值 * 固有比例
如果 height 和 width 计算值均为 auto并且该元素有固有比例，但没有固有高度或固有宽度，那么CSS2.1中 width 的该使用值未定义。然而建议是，如果包含块的宽度本身不依赖于该可替换元素的宽度，那么 width 的使用值根据常规流中块级不可替换元素的约束方程式来计算。
否则，如果 width 有计算值 auto，并且元素有固有宽度，那么固有宽度即 width 使用值。
否则，如果 width 有计算值 auto，但不符合以上任何条件，那么 width 使用值为300px。如果300px太宽超出设备，用户代理应当代之使用2:1比例且设备容得下的最大矩形的宽度。
10.3.3 常规流中块级不可替换元素
下述约束必须在下述其他属性的使用值中成立：
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。
译者：getComputedStyle 以及 Console 面板上的盒模型显示的是计算值而非使用值。当三个属性被过度约束时，某一个外边距（视 direction 属性而定）的计算值尽管是指定值，但其实使用值是根据公式来计算的。
如果其中正好仅一个值指定为 auto，则该值由等式计算得出。
如果 width 设为 auto，那么其他任何 auto 值变为 0 并且 width 由等式计算得出。
如果 margin-left 和 margin-right 均为 auto，其使用值相等。将根据包含块的边缘水平居中该元素。
10.3.4 常规流中块级可替换元素
width 的使用值根据行内可替换元素的规则决定。外边距根据不可替换块级元素的规则决定。
10.3.5 浮动不可替换元素
如果 margin-left 或 margin-right 计算为 auto，则使用值为 0。
如果 width 计算为 auto，则使用值为“收缩适应”宽度。
计算收缩适应宽度同计算使用自动表格布局算法的表格单元格的宽度相似。大致上：以除明确换行以外的地方以外都不断行的方式格式化内容来计算首选宽度，同时也计算首选最小宽度，比如说，通过尝试所有断行来计算。接着，找到可用宽度：在这种情况下，该宽度是包含块的宽度减去 margin-left，border-left-width，padding-left，padding-right，border-right-width，margin-right，以及所有相关滚动条的宽度。
那么该收缩适应宽度即：min(max(首选最小宽度,可用宽度),首选宽度)。
10.3.6 浮动可替换元素
如果 margin-left 或 margin-right 计算值为 auto，则其使用值为 0。width 的使用值同行内可替换元素算法。
10.3.7 绝对定位不可替换元素
为讲述本节和下节，术语（一个元素的）“静态位置”粗略指的是假设元素在常规流中的位置。精确地讲：
静态位置包含块 Static-position Containing Block 是假定元素 position 指定值为 static 且 float 为 none 时，元素的第一个盒的包含块。（注意由于9.7节的规则，假定计算可能要求假定一个不同的 display 计算值）。
left 的静态位置是从包含块的左边缘到假定元素 position 值为 static 且 float 值为 none 时，成为其第一个盒的假定盒的左外边距边缘的距离。如果假定盒在包含块左边，该值为负。
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。接着，如果建立静态位置包含块的元素的 direction 属性为 ltr，则设 left 为静态位置并应用下述的第三条规则；否则，设置 right 并应用第一条规则。
如果三者均不为 auto：如果 margin-left 和 margin-right 为 auto，在两个外边距值相等的这一额外约束条件下计算方程式，当计算结果为负时，如果包含块的 direction 为 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，则 width 收缩适应。接着计算 left。
left 和 right 为 auto 且 width 不为 auto，如果建立静态位置包含块的元素的 direction 属性为 lrt 则设 left 为静态位置，否则设置 right。接着计算 left（如果 direction 为 rtl）或 right（如果 direction 为 ltr）。
width 和 right 为 auto 且 left 不为 auto，则 with 收缩适应。接着计算 right。
left 为 auto，width 和 right 不为 auto，计算 left。
width 为 auto，left 和 right 不为 auto，计算 width。
right 为 auto，left 和 width 不为 auto，计算 right。
计算收缩适应宽度同计算使用自动表格布局算法的表格单元格的宽度相似。大致上：以除明确换行以外的地方以外都不断行的方式格式化内容来计算首选宽度，同时也计算首选最小宽度，比如说，通过尝试所有断行来计算。CSS2.1没有规定确切算法。接着，找到可用宽度：通过设定 left（第一种情况）或者 right（第三种情况）为0后计算宽度。
那么收缩适应宽度为：min(max(首选最小宽度,可用宽度),首选宽度)
10.3.8 绝对定位可替换元素
这种情况下，10.3.7节中直到约束方程式都适用，但该节接下来的部分由以下规则替代：
width 的使用值计算同行内可替换元素。如果 margin-left 或 margin-right 指定为 auto，使用值取决于下述规则。
left 和 right 的值都为 auto 情况下，如果建立静态位置包含块的元素的 direction 属性为 ltr，将 left 设为静态位置，而如果 direction 为 ltr，设 right 为静态位置。
如果 left 或 right 为 auto，设 auto 的 margin-left 和 margin-right 为0。
如果这时候 margin-left 和 margin-right 还是 auto，在两个外边距值必须相等的这一额外约束条件下计算方程式，当计算结果为负时，如果包含块的 direction 为 ltr（rtl），设置 margin-left（margin-right）为零并计算 margin-right（margin-left）。
如果这时候剩下一个 auto，运算方程式得到该值。
如果这时候值（译者注：margin-left 和 margin-right）被过度约束，忽略 left（包含块的 direction 属性为 rtl情况下）或者 right（direction 为 ltr情况下）并重新计算此值。
10.3.9 常规流内行内块不可替换元素
如果 width 为 auto，使用值为收缩适应宽度，同浮动元素。
计算值为 auto 的 margin-left 或 margin-right 使用值为0。
10.3.10 常规流内行内块可替换元素
同行内可替换元素。
10.4 最小和最大宽度
译者注：暂省
10.5 内容高度
百分比根据生成盒的包含块高度计算。如果包含块的高度未明确指定（如，该高度取决于内容高度），且本元素不是绝对定位，则计算值为 auto。根元素上的百分比高度则相对于初始包含块。注意：对于包含块基于块级元素的绝对定位元素而言，该百分比是根据该块级元素的内边距盒高度计算的。这是从CSS1来的变化，CSS1中百分比始终根据父元素的内容盒计算。
注意：绝对定位元素的包含块的高度与绝对定位元素本身无关，因此这种元素的百分比高度总是可以解出。然而，该高度可能直到文档中后面的元素全被处理后才知道。
负值非法。
10.6 计算高度和外边距
为计算 top，margin-top，height，margin-bottom 和 bottom，须在不同盒中作以下区分：
行内不可替换元素
行内可替换元素
常规流内块级不可替换元素
常规流内块级可替换元素
浮动不可替换元素
浮动可替换元素
绝对定位不可替换元素
绝对定位可替换元素
常规流内行内块不可替换元素
10. 常规流内行内块可替换元素
1-6 和 9-10 点中，top 和 bottom 的使用值取决于9.4.3节的规则。
注意：这些规则同适用其他任何元素一样适用于根元素。
注意：下面计算出的 height 的使用值不一定是最终结果，且视 min-height 和 max-height 可能重复计算多次，参见下面“最小和最大高度”。
10.6.1 行内不可替换元素
图片来源：http://blog.justfont.com/
译者注：行高盒 EM-Box 即上下端线之间的高度盒子
height 不适用。内容区域的高度应基于字体，但本规范没有指定如何。用户代理可能，比如说，使用行高盒 Em-Box 或字体的最大上端部 Ascender 和下端部 Descender。（后一种会确保有部分在行高盒之上或之下的字符仍然落在内容区域内，但会导致不同字体有大小不一的盒子；前者则确保作者可以控制相对于 line-height 的背景设计，但也导致字符绘制在其内容区域之外。）
注意：CSS3可能将引入一个属性来选择为内容高度使用哪种字体方案。
一个行内不可替换盒的垂直内边距、边框和外边距从内容区域的顶部和底部开始，同 line-height 无关。但只有 line-height 被用于计算行盒高度。
本规范没有规定使用了不止一种字体（当字符来源于不同字体时就可能这样）时的内容区域高度。然而我们建议应选择该高度来使得内容区域正好足够高来容纳（1）行高盒或者（2）元素内所有字体的最大上端部和下端部。注意，根据这些字体的基线对齐方式的不同，这个高度可能比任何相关字体字号都要大。
10.6.2 行内可替换元素，文档流内块级可替换元素，文档流内行内块可替换元素以及浮动可替换元素
如果 margin-top 或者 margin-bottom 为 auto，其使用值为0。
如果 height 和 width 计算值均为 auto 且该元素有固有高度，那么该固有高度为 height 使用值。
否则，如果 height 计算值为 auto，且该元素有一个固有比例，则 height 的使用值为：
width 使用值 / 固有比例
否则，如果 height 计算值为 auto，且该元素有固有高度，那么该固有高度为 height 使用值。
否则，如果 height 计算值为 auto，但以上情况均不符合，那么 height 的使用值必须设定为一个最大矩形的高度，该矩形比例为2:1，高度不超过150px，且宽度不大于设备宽度。
10.6.3 overflow 计算为 visible 时的文档流内块级不可替换元素
本节同样适用于 overflow 计算值非 visible 但已经传播到视口的文档流内块级不可替换元素。
如果 margin-top 或者 margin-bottom 为 auto，其使用值为0。如果 height 为 auto，则该高度取决于该元素是否有块级子元素以及该元素是否有内边距或者边框：
该元素的高度是从其上内容边缘到如下第一个符合情形的距离：
其最后一个行盒的下边缘，如果该行盒建立了一个包含一行或多行的行内格式化上下文
其最后一个文档流内子元素的下（可能折叠）外边距的下边缘，如果该子元素的下外边距没有同该元素的下外边距折叠
其最后一个文档流内子元素的下边框边缘，如果该子元素的上外边距没有同该元素的上外边距折叠
否则零
只有文档流内的子元素才在考虑范围之内（如，浮动盒和绝对定位盒要被忽略，相对定位盒则不考虑其位移）。注意子盒可能是个匿名块盒。
10.6.4 绝对定位不可替换元素
为讲述本节和下节，术语（一个元素的）“静态位置”粗略指的是元素在常规流中的位置。精确地讲，top 的静态位置是从包含块的上边缘到假设元素 position 值为 static，float 为 none，clear 为 none 时，作为该元素的首个盒的假定盒的上外边距边缘的距离。（注意由于9.7节的规则，假定计算可能要求假定一个不同的 display 计算值）。
但与其真的计算假定盒的尺寸，用户代理可以自由假定可能位置。
为计算静态位置，固定定位元素的包含块是初始包含块而非视口。
绝对定位不可替换元素的垂直尺寸使用值必须满足如下约束：
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，在两个外边距值相等的这一额外约束条件下计算方程式。如果 margin-top 和 margin-bottom 之一为 auto，计算等式求其值。如果二值过度约束，忽略 bottom 值并重新计算此值。
否则，采取以下六条适用规则之一。
top 和 height 为 auto 且 bottom 不为 auto，则 height 在10.6.7基础上，设值为 auto 的 margin-top 和 margin-bottom 为0，并计算 top。
top 和 bottom 为 auto 且 height 不为 auto，则设 top 为静态位置，设值为 auto 的 margin-top 和 margin-bottom 为0，并计算 bottom。
height 和 bottom 为 auto 且 top 不为 auto，则 height 在10.6.7基础上，设值为 auto 的 margin-top 和 margin-bottom 为0，并计算 bottom。
top 为 auto，height 和 bottom 不为 auto，则设值为 auto 的 margin-top 和 margin-bottom 为0，并计算 top。
height 为 auto，top 和 bottom 不为 auto，则设值为 auto 的 margin-top 和 margin-bottom 为0，并计算 height。
bottom 为 auto，top 和 height 不为 auto，则设值为 auto 的 margin-top 和 margin-bottom 为0，并计算 bottom。
10.6.5 绝对定位可替换元素
除了元素有固有高度外，其他情形同上节相似。替代序列现为：
height 的使用值同行内可替换元素计算。如果 margin-top 或 margin-bottom 指定值为 auto，其使用值由下述规则决定。
如果 top 和 bottom 均为 auto，使用元素的静态位置替换 top。
如果 bottom 为 auto，值为 auto 的 margin-top 或 margin-bottom 替换为0。
如果此时 margin-top 和 margin-bottom 仍为 auto，在两个外边距必须取等值这一额外约束条件下计算方程式。
如果此时只剩一个 auto，运算方程式求值。
如果此时二值过度约束，忽略 bottom 值并重新计算此值。
10.6.6 复杂情形
本节适用于：
overflow 计算值非 visible（除去此 overflow 属性值被已经传播到视口的情形）的文档流内块级不可替换元素。
行内块不可替换元素
浮动不可替换元素
如果 margin-top 或者 margin-bottom 为 auto，其使用值为0。如果 height 为 auto，则该高度取决于10.6.7节中元素的后代。
对于行内块元素，其外边距盒纳入其行盒高度的计算。
10.6.7 块格式化上下文根的 auto 高度
某些情况下（参见，如，上面的10.6.4和10.6.6节），建立块格式化上下文的元素的高度按如下所述计算：
如果该元素只有行内级子元素，其高度为最上行盒的顶部到最下行盒的底部的距离。
如果该元素有块级子元素，其高度为最上块级子盒的上外边距边缘到最下块级子盒的下外边距边缘的距离。
绝对定位子元素须忽略，决定定位盒不考虑其位移。注意子盒可能是匿名块盒。
此外，如果该元素有下外边距边缘低于该元素下内容边缘的浮动子元素，那么高度将增大来包含那些边缘。只有参与本块格式化上下文的浮动才考虑在内，比如，在绝对定位后代中的或者其他浮动中的浮动就不考虑。
10.7 最小和最大高度
译者注：暂省
10.8 行盒高度计算
正如行内格式化上下文一节中所述，用户代理将行内级盒排进一个行盒的垂直栈。行盒的高度决定如下：
计算行盒内每个行内级盒的高度。对于可替换元素、行内块元素以及行内表格元素，高度是其外边距盒的高度；对于行内盒，高度是其 line-height。（参见“计算高度和外边距”以及“行距和半行距”中的行内盒高度。）
行内级盒根据其 vertical-align 属性垂直对齐。如果它们对齐 top 或 bottom，它们必须以能最小化行盒高度的方式对齐。如果这些盒足够高，则有多种解决方案并且CSS2.1没有规定此行盒的基线的位置（即，支柱 Strut 位置，参见下面）。
行盒高度是最上盒顶部到最下盒底部的距离。（包括支柱，解释参见下述 line-height。）
空行内元素生成空行内盒，但这些盒仍然有外边距、内边距、边框和一个行高，因此跟有内容的元素一样会影响计算。
10.8.1 行距和半行距
CSS 假设每种字体都由字体特性来指定一个基线之上的特性高度和之下的特性深度。本节中我们用A表示（给定字体给定字号的）高度，用D表示深度。同时定义 AD = A + D，即从顶部到底部的距离。（参见下面如何找到TrueType和OpenType字体的A和D）注意该字体的这些特性是就整个而言的，无须对应任何个别字符的上端部和下端部。
用户代理必须在一个不可替换行内盒中依照字符的相应基线对齐各个字符。接着，就每个字符来决定A和D。注意单个元素的字符可能来自于不同字体因此不见得所有的A和D一样。如果行内盒完全不包含字符，则被视为包含了一个具有元素首个可用字体的A和D的支柱（一个零宽度的不可见字符）。
接着对每个字符添加行距L，其中 L = line-height - AD。行距的一般添加到A之上，另一半添加到D之下，从而赋予字符以及其行距一个基线之上的完整高度 A' = A + L/2，以及完整深度 D' = D+ L/2。
注意。L可能为负。
包含了所有字符以及字符两侧半行距的行内盒的高度正是 line-height。子元素的盒不影响这个高度。
尽管不可替换元素的外边距、边框以及内边距不纳入行盒的计算，它们仍然渲染在行内盒的周围。这意味着如果 line-height 指定的高度小于被包含盒的内容高度，内边距和边框的背景和颜色可能“流进”毗邻的行盒。用户代理应当按文档顺序渲染这些盒。这会造成后面的盒的边框绘制在前面盒的边框和文本上。
注意。CSS2.1没有定义什么是行内盒的内容区域（参加上面的10.6.1）因此不同的用户代理可能把背景和颜色绘制在不同地方。
注意。推荐OpenType和TrueType字体（在转换到当前元素的字号后）的A和D使用该字体OS/2表格中的“sTypeAscender”和“sTypeDescender”特性。如果没有这些特性，则使用HHEA表中的“Ascent”和“Descent”特性。
line-height
于内容由行内级元素组成的块容器元素而言，line-height 指定该元素内行盒的最小高度。此最小高度包括了基线之上的最小高度和之下的最小深度，就如同每个行盒以一个具有该元素字体和行高属性的零宽度行内盒开始一样。我们称此虚构盒为“支柱 Strut ”。（该命名灵感源于Tex。）
字体在基线之上和之下的高度和深度被假定为包含在字体内的特性。（更多细节，参见CSS3。）
于不可替换行内元素而言，line-height 指定用于计算行盒高度的高度。
本属性的值具有如下意义：
normal:
让用户代理设使用值为一个基于元素字体的“合理”值。该值与< number >意义相同。我们推荐 normal 的使用值在1.0到1.2之间。计算值为 normal。
< length >
指定长度用于行盒高度计算。负值非法。
< number >
本属性的使用值为此数值乘以本元素的字号。负值非法。计算值于指定值相同。
< percentage >
本属性的计算值为此百分比乘以元素的字号计算值。负值非法。
下面例子中的三条规则的行高结果相同：
div { line-height: 1.2; font-size: 10pt } /* number */div { line-height: 1.2em; font-size: 10pt } /* length */div { line-height: 120%; font-size: 10pt } /* percentage */ 当一个元素包含渲染不只一种字体的文本时，用户代理应根据最大字号来决定 normal 的 line-height 值。
注意。如一个块容器盒中的所有行内盒仅有一个共同 line-height 值并且所有行内盒字体相同（并且行内盒中不存在可替换元素、行内块元素等），上述将确保相邻行的基线正好相隔 line-height。这在不同字体的文本列必须对齐时十分重要，比如在表格中。
vertical-align
此属性影响行内级元素生成盒在行盒内的垂直定位。
注意。本属性的值在表格的上下文中有不同含义。请查阅表格高度算法一节了解详情。
下述值仅相对于父行内元素或父块容器元素的支柱 Strut 有意义。
在接下来的定义中，对行内不可替换元素而言，用于对齐的盒是高度为 line-height 的盒（包括了盒的字符以及两侧的半行距，参见上面）。对于其他所有元素，用于对齐的盒是外边距盒。
baseline
把盒的基线同父盒的基线对齐。如果盒没有基线，对齐盒的下外边距边缘与父盒的基线。
middle
把盒的垂直中点同父盒的基线加上父盒一半的 x-height 对齐。
sub
把盒的基线降到父盒的下标的适当位置。（此值对元素的文本字号无影响。）
super
把盒的基线升到父盒的上标的适当位置。（此值对元素的文本字号无影响。）
text-top
把盒的顶部同父盒的内容区域（参见10.6.1）顶部对齐。
text-bottom
把盒的底部同父盒的内容区域（参见10.6.1）底部对齐。
< percentage >
把盒提升（正值）或降低（负值）此距离（line-height 值的百分比）。0% 意味着同 baseline 一样。
< length >
把盒提升（正值）或降低（负值）此距离。0cm 意味着同 baseline 一样。
下面的值使元素相对于行盒对齐。由于元素可能有子元素相对于它对齐（子元素又可能相对它们自己的后代对齐），下面的值使用对齐子树 Aligned Subtree 的边界。一个行内元素的对齐子树包括该元素以及 vertical-align 值不为 top 或 bottom 的所有子行内元素的所有对齐子树。该对齐子树的顶部是子树内最高的盒顶部，底边也是类似这样。
top
把对齐了的子树顶部同行盒顶部对齐。
bottom
把对齐了的子树底部同行盒底部对齐。
行内表格的基线为表格首行的基线。
行内块的基线为其文档流内最后一个行盒的基线，除非该行内块没有文档流内行盒或者其 overflow 属性计算值不为 visible，这种情况下基线为下外边距边缘。
内容总结
以上是互联网集市为您收集整理的CSS规范>10视觉格式化模型详述VisualFormattingModelDetails_html/css_WEB-ITnose全部内容，希望文章能够帮你解决CSS规范>10视觉格式化模型详述VisualFormattingModelDetails_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。