Visual formatting 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只剩下了一条线
现在"我"是谁(level),我能包含谁(container box)差不多就明白了,接下来就要写我是怎么被排布的了,有三种方式
- normal flow
常规流,常规流中的block-level box参与bfc,inline level box参与ifc
bfc(在css3中称为flow root)
block formatting context,说谁触发了bfc就是给自己生成的的container box加了一个标签bfc,能控制自己生成的container box中block-level box的布局方式,并且不受外界环境干扰,元素中的box按照从上到下的顺序排布,元素的margin edge 挨着所在container box,上下margin会发生叠加,除非这个元素新建了一个bfc,那么元素将不不遵守上面的规则
生成bfc的方式如下float不为none
overflow不为visible
display为‘table-cell’,‘table-caption’,‘inline-block’or‘inline-table’
positon不为relative和static
The value of ‘block-progression’ is ‘lr’ or ‘rl’ and the value of ‘block-progression’ of its parent box is ‘tb’
The value of ‘block-progression’ is ‘tb’ and the value of ‘block-progression’ of its parent box is ‘lr’ or ‘rl’.这个我暂时不太明白ifc
inline formatting context,控制inline-level box的排布,每一个inline container box都是一个ifc,其实也就是多个line boxes的组合,就像bfc中一样,不过从垂直排列变成了水平排列,多了对齐方式,关于line box在详细了解line-height和vertical写过,这里主要写line box的可用宽度是其所在的container box的宽度减去float元素的宽度,或者说若有float元素和line box重叠,则内容就不挨着container box,之间隔了一个float宽度ffc
flex formatting context,ffc中的container box不存在block-level或者inline-level,每一个都是一个flex item,建议看阮一峰Flex布局介绍gfc
gird formatting context,另一种布局方式,暂时还不是很了解
- float
float先根据常规流定位,然后从常规流中取出,向左或向右移动,直到碰见另一个float或者container box的边缘 - absolute/fixed
从常规流完全取出,然后根据所处的containing block定位,就像上面containing block中写的定位方式
