在
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四:常规流中的Block formatting context
中,已经分享了块格式化上下文,现在继续分享关于常规流中的inline formatting contexts。
行内格式化上下文(inline formatting contexts)
什么是行框
相对于块格式化上下文,在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是 包含块 的顶部。水平方向上的 margin,border 和 padding 在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。
示意图:
行框的宽度由它的 包含块 和其中的浮动元素决定。高度的确定由行高度计算规则决定,后面会介绍。
行内框在行框中垂直方向上的对齐
行框的高度总是足够容纳所包含的所有框。不过,它可能高于它包含的最高的框(例如,框对齐会引起基线对齐)。当一个框 B 的高度小于包含它的行框的高度时,B 在行框中垂直方向上的对齐决定于 ‘vertical-align’ 特性。 ‘vertical-align’ 默认值为基线( ‘baseline ’)对齐。
EM所形成的行内框内容的顶端与行中最高元素的顶外边界对齐。
行内框可能被分割
如果几个行内框在水平方向无法放入一个行框内,它们可以分配在两个或多个垂直堆叠的行框中。因此,一个段落就是行框在垂直方向上的堆叠。行框在堆叠时没有垂直方向上的分割且永不重叠。
如果一个行内框超出包含它的行框的宽度,它会被分割成几个框,并且这些框会被分布到几个行框内。如果一个行框不能被分割(例如,行内框只包含单个字符,或者语言特殊的断字规则不允许在行内框里换行,或者行内框受到带有nowrap或pre值的 ‘white-space’ 特性的影响),这时,行内框会溢出行框。
如果一个行内框被分割,margin、padding 和 border 在所有分割处没有视觉效果。
行内框还可能由于双向文本处理(bidirectional text processing)而在同一个行框内被分割为好几个框。
修改上面例子中 P 元素的宽度为100px:
发现,因为行框宽度限制(100px),第一个 SPAN 元素形成的行内框,被分割成了3段。
行框的范围
通常,行框的左边接触到其 包含块 的左边,右边接触到其 包含块 的右边。然而,浮动元素可能会处于包含块边缘和行框边缘之间。总之,尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度(包含块的宽度),它们可能会因浮动元素缩短了可用宽度,而在宽度上发生变化。同一行内格式化上下文中的行框通常高度不一样(如,一行包含了一个高的图形,而其它行只包含文本)。
根据我的理解,行框的范围应是上图所示,不知道,有没有感觉不正确的同学,请告知,并说明原因,谢谢。
行内框的水平对齐
当一行中行内框宽度的总和小于包含它们的行框的宽,它们在水平方向上的对齐,取决于 ‘text-align’ 特性。如果其值是 ‘justify’,用户端也可以拉伸行内框(除了 inline-table 和 inline-block 框)中的空间和文字 。注意,
可见,对齐的时候是根据行框的宽度,居中对齐。
空的行内框应该被忽略
不包含文本,保留空白符,margin/padding/border 非0的行内元素,以及其他常规流中的内容(比如,图片,inline blocks 和 inline tables),并且不是以换行结束的行框,必须被当作零高度行框对待。就 margin 折叠而言,这种行框必须被忽略。
可见,span 和其中的空行内框都被忽略。
这个概念也蛮抽象难懂的,没必要死扣它到底是个什么东西。
参考资料
行内格式化上下文(inline formatting contexts)
什么是行框
相对于块格式化上下文,在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是 包含块 的顶部。水平方向上的 margin,border 和 padding 在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框。
-
HTML code
-
< p style ="background-color:silver; font-size:30px;" > TEXT1 < span style ="border:3px solid blue;" > text in span </ span > great1 < em style ="border:3px solid red;" > thx a lot </ em > bee < strong style ="border:3px solid green;" > give me 5! </ strong > Aloha! </ p >
示意图:
行框的宽度由它的 包含块 和其中的浮动元素决定。高度的确定由行高度计算规则决定,后面会介绍。
行内框在行框中垂直方向上的对齐
行框的高度总是足够容纳所包含的所有框。不过,它可能高于它包含的最高的框(例如,框对齐会引起基线对齐)。当一个框 B 的高度小于包含它的行框的高度时,B 在行框中垂直方向上的对齐决定于 ‘vertical-align’ 特性。 ‘vertical-align’ 默认值为基线( ‘baseline ’)对齐。
-
HTML code
-
< p style ="background-color:silver; width:500px; " > < span style ="border:1px solid blue; font-size:50px;" > text in span </ span > < em style ="border:1px solid yellow; font-size:30px; vertical-align:top;" > great1 </ em > </ p >
EM所形成的行内框内容的顶端与行中最高元素的顶外边界对齐。
行内框可能被分割
如果几个行内框在水平方向无法放入一个行框内,它们可以分配在两个或多个垂直堆叠的行框中。因此,一个段落就是行框在垂直方向上的堆叠。行框在堆叠时没有垂直方向上的分割且永不重叠。
如果一个行内框超出包含它的行框的宽度,它会被分割成几个框,并且这些框会被分布到几个行框内。如果一个行框不能被分割(例如,行内框只包含单个字符,或者语言特殊的断字规则不允许在行内框里换行,或者行内框受到带有nowrap或pre值的 ‘white-space’ 特性的影响),这时,行内框会溢出行框。
如果一个行内框被分割,margin、padding 和 border 在所有分割处没有视觉效果。
行内框还可能由于双向文本处理(bidirectional text processing)而在同一个行框内被分割为好几个框。
修改上面例子中 P 元素的宽度为100px:
-
HTML code
-
< p style ="background-color:silver; width:100px; " > < span style ="border:1px solid blue; font-size:50px;" > text in span </ span > < em style ="border:1px solid yellow; font-size:30px; vertical-align:top;" > great1 </ em > </ p >
发现,因为行框宽度限制(100px),第一个 SPAN 元素形成的行内框,被分割成了3段。
行框的范围
通常,行框的左边接触到其 包含块 的左边,右边接触到其 包含块 的右边。然而,浮动元素可能会处于包含块边缘和行框边缘之间。总之,尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度(包含块的宽度),它们可能会因浮动元素缩短了可用宽度,而在宽度上发生变化。同一行内格式化上下文中的行框通常高度不一样(如,一行包含了一个高的图形,而其它行只包含文本)。
-
HTML code
-
< p style ="background-color:silver; width:500px;overflow:hidden; " > < span style ="border:1px solid blue; font-size:50px; float:left;" > FLOAT </ span > < em style ="border:1px solid yellow; font-size:30px;" > great1 </ em > < span style ="border:1px solid yellow;" > good </ span > </ p >
根据我的理解,行框的范围应是上图所示,不知道,有没有感觉不正确的同学,请告知,并说明原因,谢谢。
行内框的水平对齐
当一行中行内框宽度的总和小于包含它们的行框的宽,它们在水平方向上的对齐,取决于 ‘text-align’ 特性。如果其值是 ‘justify’,用户端也可以拉伸行内框(除了 inline-table 和 inline-block 框)中的空间和文字 。注意,
-
HTML code
-
< p style ="background-color:silver; width:500px;overflow:hidden; text-align:center; " > < span style ="border:1px solid blue; font-size:50px; float:left;" > FLOAT </ span > < em style ="border:1px solid yellow; font-size:30px;" > great1 </ em > < span style ="border:1px solid yellow;" > good </ span > </ p >
可见,对齐的时候是根据行框的宽度,居中对齐。
空的行内框应该被忽略
不包含文本,保留空白符,margin/padding/border 非0的行内元素,以及其他常规流中的内容(比如,图片,inline blocks 和 inline tables),并且不是以换行结束的行框,必须被当作零高度行框对待。就 margin 折叠而言,这种行框必须被忽略。
-
HTML code
-
< div style ="border:1px solid red; width:100px;height:100px;margin-bottom:50px;" > DIV1 </ div > < span >< em >< strong ></ strong ></ em ></ span > < div style ="border:1px solid red; width:100px;height:100px;margin-top:50px;" > DIV2 </ div >
可见,span 和其中的空行内框都被忽略。
这个概念也蛮抽象难懂的,没必要死扣它到底是个什么东西。
参考资料
W3C:http://www.w3.org/TR/CSS2/visuren.html#inline-formatting
原文地址:
http://topic.csdn.net/u/20100804/16/0130ce8c-1568-442b-a4f5-91e7a2bf9197.html?020362301444696174