基本术语
先回顾一些基本术语:
- 匿名文本
- 匿名文本(anonymous text)是指所有包含在行内元素的字符串。空格也是匿名文本的一部分。
- em框
- 在字体中定义,也称为字符框(charater box)。实际的字形可能比em框更高或矮。
- 内容区
- 内容区可以是元素中各字符的em框串在一起构成的框,也可以是由元素中字符字型描述的框。
- 行间距
- 行间距(leading)是
font-size
与line-height
值之差。这个差分为两个半间距(half-leading),分别应用到内容区的顶部和底部。
行间距只应用于非替换元素。 - 行内框
- 通过内容区增加行间距来描述。对于非替换元素,元素行内框的高度刚好等于
line-height
的值;对于替换元素,则等于内容区的高度。 - 行框
- 是包含该行中出现的行内框的最高点和最低点的最小框。
由此,CSS提供了一些行为和有用的概念:
- 内容区类似于一个块级元素的内容框。
- 行内元素的背景应用于内容区的所有内边框。
- 行内元素的边框要包围内容区的所有内边框和边框。
- 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果,不会影响元素行内框的高度(也不会影响包含该元素的行框的高度)。
- 替换元素的外边距和边框确实会影响到该元素行内框的高度。相应地,也可能影响包含该元素行框的高度。
行布局
以下是构造行框的步骤:
- 按以下步骤确定行中各元素行内框的高度:
- 得到各行内非替换元素及不属于后代行内元素的所有文本的
font-size
值和font-line-height
值。由font-line-height
减去font-size
得到框的行间距,将其一半分别应用到em框的顶部和底部。 - 得到各替换元素的
height
、margin-top
、margin-bottom
、padding-top
、padding-bottom
、border-top-width
和border-bottom-width
值,把它们加在一起
- 得到各行内非替换元素及不属于后代行内元素的所有文本的
- 对于各内容区,确定它在整行基线的上方和下方分别超出多少。
- 对于指定了
vertical-align
值的元素,确定其垂直偏移量。由此可知该元素的行内框要向上或向下移动多远,并改变元素在基线上方或下方超出的距离。 - 将基线与最高行内框顶端之间的距离加上基线与最低行内框底端之间的距离,即为行框高度。
行内格式化
行的高度(行框的高度)由其组成元素和其它内容的高度确定。
line-height
只会影响行内元素和其它行内内容,而不会影响块级元素。
可以为一个块级元素设置 line-height
值,并将这个值应用到块中的所有内容,而不论内容是否包含在行内元素中。
行内非替换元素
当 font-size
比 line-height
大时,行内框会小于内容区。
如果改变行内框的垂直对齐,会应用同样的高度确定原则。
利用本章的概念,vertical-align
各个关键字值的效果如下:
top
:将元素行内框的顶端与包含该元素行内框的顶端对齐;bottom
:将元素行内框的底端与包含该元素行内框的底端对齐;text-top
:将元素行内框的顶端与父元素内容区的顶端对齐;text-bottom
:将元素行内框的底端与父元素内容区的底端对齐;middle
:将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐;super
:将元素的内容区和行内框上移。sub
:将元素的内容区和行内框下移。PERCENTAGE
:将元素上移或下移相对元素line-height
值指定的一个百分数。
如果需要为行内元素加上边框,为了防止边框覆盖其它行的内容,可以适当增加 line-height
,从而提高行框的高度,避免与其它文本重叠。
基线与行高
各行框的具体高度取决于其组成元素相互之间如何对齐,这主要依赖于字体设定的基线位置。
设置 line-height
的最好方法是使用一个具体的数值,该数值会变成继承值作为缩放因子。
行内元素基本上会作为一行放置,然后分成多个部分。
如果向行内元素应用左右的外边距,这些外边距将作用于开头或末尾。
如果向行内元素应用上下的内边距,它并不会增加行框的高度,可能会导致背景色覆盖相邻行的内容。
行内替换元素
一般认为行内替换元素有确定的高度和宽度。有确定高度的替换元素可能导致行框比正常行框要高,但这并不会改变lh值。
行内替换元素的 line-height
值用于 vertical-align
垂直对齐等。
行内替换元素的内边距和边框会影响行框的高度,为行内替换元素增加内边距、边框和外边距会增大其行内宽。
负外边距会使替换元素的行内框小于正常大小。
如果表单元格中含有图像,表单元格要足够高,从而能把包含该图像的行框包含在内。
改变元素显示
可以为属性 display
设置一个值来影响用户代理显示的方式:
none
|
inline
|
block
|
inline-block
|
list-item
|
run-in
|
table
|
inline-table
|
table-row-group
|
table-header-group
|
table-footer-group
|
table-row
|
table-column-group
|
table-column
|
table-cell
|
table-caption
|
inherit
inline
使用 display
可以改变一个元素的角色,将其更改为块级元素或行内元素。例如:
可以将导航区的链接换行显示。
display
属性只是改变元素的显示方式,并没有真正改变元素的性质。
inline-block元素
行内块(inline-block)元素是块级元素与行内元素的混合,作为一个行内框与其它元素的内容相关。
行内块元素的底端默认位于文本行的基线上,而且内部没有行分隔符。
在行内块元素内部,会像块级元素一样设置内容的格式,它同样有属性 width
和 height
。
如果行内块元素的 width
未被定义或为 auto
,元素会收缩以适应其内容。行内块元素不能跨文本行显示。
下图展示了行内块元素的布局效果:

run-in元素
该值可以使某些块级元素成为下一个块级元素的行内部分。如果一个元素生成 run-in
框,而且该框后面是一个块级框,那么该 run-in
元素将成为块级元素框开始处的一个行内框。
该效果经常用于将标题作为文本段落的一部分出现。例如:

如果 run-in
元素后不是一个块级元素,该元素极有可能生成一个块级框。