task0001第六部分之BFC,IFC

时间:2022-11-14 13:35:42

FC

之前在两列布局的笔记里面写了有关BFC的理解,但是还有很多FC啊,什么IFC,GFC,FFC(后两个CSS3中引入)
那它们共同点就是…都有个FC,FC是什么呢…..
FC呢就是Formatting context,format就是安排…的格局,排版,使…格式化的意思,context呢就是语境,上下文,背景,环境的意思。
那所以它的意思就是安排排版环境…其实刚开始看到格式化上下文……我也只能理解出手机U盘格式化的意思…
安排排版环境我觉得对我个人而言,相对…..通俗一点吧。
那BFC呢就是给块级元素安排个排版环境,IFC呢就是给内联元素安排…..
那可以不可以这样说,把各种BFC啊IFC啊等等的,想象成一个组织,加入它们的组织是有条件的,满足了这个条件就能进入这个组织,也就是说触发了某FC。那每个不同的FC都有着各自的规矩,也就是它们的排版规则。
http://www.w3help.org/zh-cn/kb/010/
关于上面FC这篇讲解得比较专业。

BFC

在我的这http://blog.csdn.net/u014106213/article/details/52659086 我引用了一位前辈的关于BFC的讲解部分,这位前辈写的关于BFC的内容挺不错的,看完大概能清楚BFC了。

IFC

首先是IFC的触发条件:

display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;

具体的内容,网上找了一圈,看到的似懂非懂,于是…….
https://www.w3.org/TR/CSS2/visuren.html#inline-foirmatting
于是只能结合翻译..有道啥的,自己再根据理解翻译意思…..
以下…是我结合后的翻译….

IFC的主要规则是下面加粗的一段:

在内联格式设置上下文中:盒子(元素)从一个包含块的顶部开始一个接一个水平放置。盒子之间的——水平方向的外边距margin、border、padding值都遵守默认规律。盒子可以以不同的方式垂直排列:盒子的底部或顶部可以对齐,或在其文本的基线可对准。包含形成一行的框的矩形区域被称为线框,line box。

以下的内容…可以了解了解吧…虽然翻译完也觉得不是很通顺
给这个span元素加了个border……可以看到个红色的框框,不知道和这个line-box是不是重合的。
task0001第六部分之BFC,IFC

line box的宽度由包含块和浮动元素的存在所决定。

这个根据包含块应该是指宽度适应里面包含的元素,而浮动元素呢就是说,如果加了浮动之后,元素之间会没有间隙,那么宽度又改变了

line box的高度由line box高度计算中给出的规则确定。

line box高度总是足够包含它所有的盒子。无论如何,它会比它包含的最高的盒子高(如果,例如,盒子是对齐的,那么会导致基准线会向上)。当B盒子的高度小于包含它的线框的高度时,在线框内的B的垂直对齐是由“垂直对齐”属性决定的。比如vertical-align: middle;这个属性

当几个内联级别框在一个line box内水平放置不下时,它们分布在两个或多个垂直堆叠的line box中

这就是说像文字一样折行嘛…….

因此,一个段落是一个垂直堆栈的line box。line box是没有垂直分离的堆叠(除了指定的其他地方),他们从来不会重叠。

在一般情况下,一个line box的左边缘接触其包含块的左边缘,右边缘接触其包含块的右边缘。然而,浮动元素可能会出现在包含块边缘和line box边缘之间的。因此,虽然在相同的内联格式上下文中的line box一般具有相同的宽度(包含块的宽度),但如果可用的水平空间被减少,它们可能会因宽度的变化而有所不同。相同的内联格式上下文中的line box一般在高度上有所不同(例如,一行可能包含一个高的图像,而其他的行则只包含文本)。

当行上的内联级框的总宽度小于包含它们的line box的宽度时,line box内的它们的水平分布是由“text-align”属性决定的。如果该属性具有“justify”的值,用户代理可以在内联框中使空间和单词拉伸(但 inline-table和inline-block boxes不会)。

当内联框超过line box的宽度时,它被拆分成多个框,这些框被分布在多个line box中。如果一个内联盒子不能分割(例如,如果内联盒子包含一个字符,或特定的语言文字规则不允许有间隔,或者被’white-space’的’nowrap’和’pre’影响),那么内联盒子溢line box。

当一个内联框被分割时,在分割的地方margin,border和padding都没有视觉效果。

由于双向的文本处理,内联框也可以在同一行框内被拆分成几个框。

http://www.w3help.org/zh-cn/kb/010/ 这篇文章讲了一些关于分割和对齐的内容。

line box被构造的意义是为了在触发了IFC的地方控制内联元素的排版。它不包含文字,不包含预设空白,不包括设置值为非零的margin,非零的padding,非零的border的内联元素,并不包含其他的处于文档流中的内联元素(如图像、内联块 inline blocks或内联表inline tables),而且结尾的时候不会换行。line box为了确定它任何包含的元素所在的位置需要被认为是零高度的,为了其他某些原因,它需要被认为是虚构的。

以上一大堆…..
http://www.xiaomeiti.com/note/3608中总结得很精炼

BFC和IFC都是CSS2中的概念,在CSS3中还提出了FFC和GFC…上面那个链接都简单介绍了一下这四个FC