关于可视化格式模型和各种FC

Visual formatting model

参考

Visual formatting model
CSS basic box model

这个直译为可视化格式模型,规定了文档树中的每个元素的布局
先解释什么是Containing Box,Controlling Box generation,什么是xx-level element,什么是xx-level box
下文中的"我"是指一个元素

xx-level element and xx-level box

这个很好理解,就是我是什么级别的吗

block-level element
display为'block','list-item','table'的element被称为block-level element
inline-level element
display为'inline','inline-table','inline-block被称为inline-level element
block-level-box
每一个block-level element一般会生成一个block-level box,称为主box,有些会生成不止一个,比如display为list-item的元素,会生成额外的box,这些额外的box根据主box定位,block-level box会参与BFC
inline-level box
每一个inline-level element都会生成inline-level box,参与IFC

Controlling Box generation

这个我理解为生成何种类型的container box,

block container box
block-level box会生成block container box,其实规范是说

a block-level box is also a block container box

我还是觉得把他理解为生成更好,block container box也可以通过其他box生成,比如display为'inline-block'等等,block container box只能包含block-level boxes或者只生成IFC来包含inline-level boxes,如果盒子中即有inline-level boxes,又有block-level boxes,其实是为inline-level boxes生成了一个匿名的block box只用来生成IFC来包含inline-level boxes,block box是指即为block-level box,又生成了block container box

inline container box
一个不可替换元素(比如p,div等等,img这种由src定的,input这种由value定的称作可替换元素)display为'inline'会生成inline container box
注意规范中是没有inline containing box这个词的,只有'inline box'规范中说

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context

为了更好理解我把这里的contents解释为inline containing box's contents
inline container box可以包含inline-level box,如果inline container box中放入了block box,那么这个inline container box将会被打破,其中的内容会分为三部分,两个被隔开的匿名inline box,和插入的block box,这时的第一个匿名inline box的inline container box就会成为原来的inline container box
比如这样

测试图片

<p style="border:1px solid #ccc; width:200px; padding:20px;">
    我是P中的文字
    <span style="border:1px solid #ccc; position:relative;color:#ccc">
        我是匿名inline box
        <em style="color:#000;position:absolute;bottom:0; left:0;">absulute</em>
        <em style="display:block;height:40px ;color:green; top:0; left:0;">我是Block</em>
        <em style="color:red; ">我是匿名inline box</em>
    </span>
</p>

Containing Block

直译为包含块,是一个矩形区域,,决定了我在这个区域中的布局和大小等等

如果我的position为relative或者static,那么我所处的包含块由距离我最近的祖先元素创建,包含块的大小是祖先元素content box的大小
如果我的positon为absolute,我的包含块由最近的position不为static的祖先元素创建,包含块的大小为祖先元素的padding box的大小
如果最近的祖先元素的为inline box,那么,还是看图吧

测试图片

<p style="border:1px solid #ccc; width:200px; padding:20px;">
我是P中的字
    <span style="border:1px solid #ccc; position:relative;color:#ccc">
        我是字呀我是字,我是字呀我是字,我是字呀,我是字,我是字,我是字呀我是字,我是字呀我是字
        <em style="position:absolute; color:green; top:0; left:0;">XX</em>
        <em style="position:absolute; color:red; bottom:0; right:0;">XX</em>
    </span>
</p>

还有这样,那containing block只剩下了一条线