IFC(Inline formatting contexts)学习

小鱼儿 2022-07-16 11:47 196阅读 0赞

翻译来自： [https://www.w3.org/TR/CSS21/visuren.html\#inline-formatting][https_www.w3.org_TR_CSS21_visuren.html_inline-formatting]

1.  在IFC中，盒子依次水平排列，从它的包含块的最顶端开始。水平方向的margins、borders和paddin体现在这些盒子之间。这些盒子可以在垂直方向可以以不同的方式对齐：底部对齐、顶部对齐或者以内部文字的基线对齐。包含这些盒子的一行矩形区域成为行框。
2.  行框的宽度由包含块决定和（这行）是否存在floats而决定。行框的高度由[行高的计算规则决定][Link 1]。
3.  行框的高度永远容得下这一行所有包含的盒子。但是，行框甚至可能比包含的最高的盒子要高（例如，盒子对齐了导致基线排列）（译者注：不是很懂，原文boxes are aligned so that baselines line up）。当盒子B的高度小于包含其的行框的时候，行框内的B的垂直对齐由“vertical-align”属性决定。当一个行框不能装下多个行内框时，它们被打断成二个或多个垂直堆叠的行框。所以，一个段落是读个行框的垂直堆叠。行框在垂直方向没有分隔的堆叠（除了指定的其它地方）并且它们从不重叠。
4.  通常，行框的左边缘紧贴这它的包含块的左边缘，右边缘紧贴这包含块的右边缘。然而，浮动盒子可能出现在包含块的边缘和这个行框的边缘之间。因此，即使说通常情况下同一个包含框内的行框们有一样的宽度，但因为有floats元素的存在它们也可能有不同的宽度。同一IFC中的行框通常有不同的高度（例如有一行可能有一个高的图片然而其他行仅有文字）。
5.  当所有内联盒子的宽度总和超过了包含它们的行框的宽度，它们的水平排布由“text-align”属性决定个。如果该属性值为“justify”，用户代理则会拉伸内联框中的空格和单词（出去inline-table喝inline-block的盒子）。
6.  当一个行内框超出了行框的宽度，它会被分割成多个盒子，这些盒子分布在多个行框中。如果这个行内框不能被分割（例如，这个行内框包含一个单字符或者有特定的语言分割规则不允许在行内框中出现分割，再或者说这个行内框被值是nowrap或pre的white-space所影响），因此这个行内框会移除行框。
7.  当一个行内框被分割，margins、borders和paddings并不会在分割处体现出来。
8.  行内框可能会在同一行行框内被分割成多个因为[双向文本处理][Link 2]。
9.  行框的创建被用来保证行内框的内容在一个IFC中。没有任何文本的行框——没有保留的空格，没有无margin无padding无border的内联元素，没有其他的[in-flow][] 的内容，并且没有以保留换行符结尾的，必须被当做高度为0的行框，目的是为了确定它里面任何元素的位置，并且必须得被视为没有其他的目的。

**译者注**  
\- containing block: 包含块；  
\- inline-level box：内联框  
\- inline box：行内框；  
\- line box：行框；

**相关阅读**  
1. [关于vertical-align:top问题？][vertical-align_top]  
2. [\[翻译\]关于Vertical-Align你需要知道的事情][Vertical-Align]  
3. [CSS深入理解vertical-align和line-height的基友关系][CSS_vertical-align_line-height]  
4. [CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins][CSS_Box Model_IFC_BFC_Collapsing margins]

[https_www.w3.org_TR_CSS21_visuren.html_inline-formatting]: https://www.w3.org/TR/CSS21/visuren.html#inline-formatting
[Link 1]: https://www.w3.org/TR/CSS21/visudet.html#line-height
[Link 2]: https://www.w3.org/TR/CSS21/visuren.html#direction
[in-flow]: https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
[vertical-align_top]: https://www.zhihu.com/question/24838402/answer/32583143
[Vertical-Align]: https://segmentfault.com/a/1190000002668492
[CSS_vertical-align_line-height]: http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
[CSS_Box Model_IFC_BFC_Collapsing margins]: https://segmentfault.com/a/1190000004625635#articleHeader7