2015/10/08: 原“10.8标题 行盒高度计算”改为“10.8 行高计算”。英文原文为“line height”。由于翻译时候看到那段结论是行盒的高度,脑抽就把原本翻译对的标题改了下,刚回顾一番深觉不妥,故改回来。
译者注:本文未全文翻译(最近要校招找工作,所以学习压力大,先挑重头,所以暂省略了最大最小宽度高度两部分)。文中部分内容和配图是我自己的理解,但没有一一标注。此外,文中有许多术语,我都有在后面注明原英文。最后要吐槽以下,
vertical-align
属性在各浏览器中的兼容性真是跪了,如果读者有了解这个兼容性问题,请务必留言解惑!之后我也会抽空解决这个属性问题哒!
10.1 “包含块”的定义
元素的盒的位置和大小有时会根据某一矩形来计算,该矩形被称为该元素的包含块。一个元素的包含块定义如下:
根元素所在的包含块是一个被称为初始包含块
Initial Containing Block
的矩形,在连续媒体中,其尺寸为视口大小,其基点为画布原点。在分页媒体中,初始包含块即为页面区域Page Area
。初始包含块的direction
属性与根元素的一致。对于其他元素而言,如果元素
position
为relative
或static
,其包含块为最近的块容器祖先盒的内容边缘。如果元素有
position: fixed
,其包含块由连续媒体中的视口或分页媒体中的页面区域创建。-
如果元素有
position: absolute
,在以下情况下,其包含块由position
值为absolute
,relative
,fixed
的最近祖先创建:如果该祖先元素为行内元素,包含块即围绕着为该元素生成的第一个和最后一个行内盒的内边距盒的边界盒。在CSS2.1中,如果该行内元素分跨多行,则包含块未定义。
-
否则,包含块由该祖先元素的内边距边缘构成。
如果没有这样的祖先元素,包含块即初始包含块。
在分页媒体中,一个绝对定位元素相对于其包含块定位,并忽略所有的换页(如同文档是连续的)。该元素可能随后被打断而分布在几个页面之中。
对于绝对定位内容,如果解析为页面上的一个位置而不是正在布局的页面(当前页面),或解析为已经为打印而渲染出来的当前页面的一个位置,打印机可能将该内容放置于:
当前页的其他位置
下一页,或者
省略该内容
注意:一个分布在多页的块级元素在每页的宽度可能不同,并且可能会存在设备特定限制。
在没有定位的情况下,下面文档:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Illustration of containing blocks</title>
</head>
<body id="body">
<div id="div1">
<p id="p1">This is text in the first paragraph...</p>
<p id="p2">This is text <em id="em1"> in the
<strong id="strong1">second</strong> paragraph.</em></p>
</div>
</body>
</html>
的包含块如下建立:
生成盒子的元素 => 生成包含块的元素
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手册
该属性指定盒的内容宽度。
该属性不适用于不可替换行内元素。不可替换行内元素的盒的宽度即(在子元素的任何相对位置之前)其中渲染内容的宽度。回想下,行内盒是排进行盒的。行盒的宽度由其包含块给予,但可能因浮动而缩小。
属性值有如下意义:
长度 <length>
指定一个长度单位的内容区域宽度。
百分比 <percentage>
指定一个百分比宽度。百分比根据生成盒的包含块的宽度计算。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 行内不可替换元素
译者注:行高盒
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
,这种情况下基线为下外边距边缘。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。