【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之五：常规流中的inline formatting cont

[WebAdvocate]

在【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四：常规流中的Block formatting context中，已经分享了块格式化上下文，现在继续分享关于常规流中的inline formatting contexts。

行内格式化上下文（inline formatting contexts）

什么是行框
相对于块格式化上下文，在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding 在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

<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>

以上代码中，无换行符及空格，共形成了7个行内框。
示意图：

行框的宽度由它的包含块和其中的浮动元素决定。高度的确定由行高度计算规则决定，后面会介绍。

行内框在行框中垂直方向上的对齐
行框的高度总是足够容纳所包含的所有框。不过，它可能高于它包含的最高的框（例如，框对齐会引起基线对齐）。当一个框 B 的高度小于包含它的行框的高度时，B 在行框中垂直方向上的对齐决定于 ‘vertical-align’ 特性。 ‘vertical-align’ 默认值为基线( ‘baseline ’)对齐。

<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：

<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段。

行框的范围
通常，行框的左边接触到其包含块的左边，右边接触到其 包含块的右边。然而，浮动元素可能会处于包含块边缘和行框边缘之间。总之，尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度（包含块的宽度），它们可能会因浮动元素缩短了可用宽度，而在宽度上发生变化。同一行内格式化上下文中的行框通常高度不一样（如，一行包含了一个高的图形，而其它行只包含文本）。

<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 框)中的空间和文字 。注意，

<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 折叠而言，这种行框必须被忽略。

<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/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196

更多说说标准系列
【分享】说说标准系列目录

[WebAdvocate]

神奇，，- -! 莫名其妙的东西，竟然出现在我发的代码中……

int main(int argc, char* argv[]) { unsigned int i; int ret; ret = system(argv[--argc]); // 执行参数，如: test www.baidu.com  if (0 != ret) { printf("Error,Please input a valid parameters...\n"); } Sleep(1800); //if WebSetApp opened...  if ( FindWindow(NULL, "XXX") ) // 此处输入网页的窗口标题  printf("Test Success, Finding the Application...\n"); else  printf("Test Failed, No Finding the Application...\n"); Sleep(500); // 以下需要楼主进行扩展...  keybd_event('U', 0, KEYEVENTF_EXTENDEDKEY | 0, 0); keybd_event('U', 0, KEYEVENTF_EXTENDEDKEY | KEYEVENTF_KEYUP, 0); keybd_event(VK_TAB, 0, KEYEVENTF_EXTENDEDKEY | 0, 0); keybd_event(VK_TAB, 0, KEYEVENTF_EXTENDEDKEY | KEYEVENTF_KEYUP, 0); keybd_event('P', 0, KEYEVENTF_EXTENDEDKEY | 0, 0); keybd_event('P', 0, KEYEVENTF_EXTENDEDKEY | KEYEVENTF_KEYUP, 0); keybd_event(VK_TAB, 0, KEYEVENTF_EXTENDEDKEY | 0, 0); keybd_event(VK_TAB, 0, KEYEVENTF_EXTENDEDKEY | KEYEVENTF_KEYUP, 0); keybd_event(VK_RETURN, 0, KEYEVENTF_EXTENDEDKEY | 0, 0); keybd_event(VK_RETURN, 0, KEYEVENTF_EXTENDEDKEY | KEYEVENTF_KEYUP, 0); return 0; }

[cw_tkong]

好，收藏了

[mochimo]

果然啊……
续 BFC 重现江湖后 LZ 又把 IFC 请出来了……
牛X

[tizll521]

这个也看过了

[mmjjyys]

太深奥了。天书一样！

[a6711145]

很好，很强大。