2019-02-27-CSS的可视化格式模型(2)

上一篇忘了说明什么是格式上下文（FC）

FC

Formattinf Context,格式上下文。它定义了框内部的元素渲染规则，比较抽象。

FC 像是一个容器，里面内部包含元素。容器可以隔开里面的额元素和外面的元素，保护内部元素被外部元素影响。

注意，并不是说所有的框都产生 FC，而是符合特定条件才会产生，只有产生了对于的 FC 后才会应用对应渲染规则

IFC（inline Formatting Context）

行内框产生的格式上下文

IFC 规则

在行内格式化上下文中框一个接一个水平排列，七点是包含块的顶部。

水平方向上的margin，border和padding在框之间得以保留

框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐

浮动元素可能会处于包含块的边缘和行款边缘之间

尽管在相同的行内格式胡上下问中的行框通常拥有相同的宽度，他们可能会因为浮动元素缩短了可用宽度，而在宽度上发生变化

同一行内格式化上下文中的行框通常高度不一样（如，一行包含了一个高的图形，而其他行只包含了文本）

当一行中行内宽度和总和小鱼包含他们的行框的宽，他们在水平方向上对齐，取决于「text-align」的属性

空的行内框应该被忽略

及不包含,保留空白符，margrin/padding/border非0的行内元素，以及其他常规流中的内容（比如，图片，inline-blcoks和inline-tables）并且不是以换行结束的行框，
必须被当做零高度行框对待

行匡

包含那些框的长方形区域，会形成一行，叫行框

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

行框的规则

如果几个行内框在水平方向无法放入一个行框内，它们可以分配在两个或者多个行框垂直堆叠的行框内
行框在堆叠时没有垂直方向上的分割且永不重叠
行框的高度总是足够容纳所包含的所有框，不过他可能高于它包含的最高的框
行框的左边接触到其包含快的左边，后边接触到其包含块的右边

总结

• 行内元素总会应用 IFC 渲染规则
• 行内元素会应用 IFC 规则渲染，例如「text-align」可以用来居中
• 块框内部，对语文本这类的匿名元素，会产生匿名行框包围，而行框内部就应用 IFC 渲染规则
• 行内框内部，对于那些行内元素，应该应用 IFC 渲染规则
• 另外， 「inline-block」，挥着元素外层生成 IFC（所以这个元素是可以通过「text-align」来水平居中的），当然它内部则是按照 BFC 规则渲染

相比较 BFC 规则，IFC 可能更加抽奖（因为没有那么清晰的规则和触发条件）

但是总体来说，它就是行内元素自身如何显示以及在框内如何摆放的渲染规则。