框模型
margin,padding无效的情况
margin对于table相关类型 ( 除了table-caption,table,inline-table
这3类 ) 的元素是不起作用的,如td,tr,th等。另外对于行内非替换元素 ( 如span元素 ), 垂直方向的margin是不起作用的。
padding属性也有一定的限制,它可以使用在除display值是table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column
之外的所有的元素
margin折叠
在框模型中,外边距折叠是一个非常容易使人迷惑的地方,简单来说,外边距折叠指的是相邻的两个或三个
外边距会合并成一个外边距。注意此处说的相邻是外边距相邻,而不是元素相邻。
判断外边距是否相邻,可以总结为以下两点:
- 这两个外边距没有被非空内容,padding,border,**clea**r属性所隔离。
- 这些margin都处于常规流中,他们可以是相邻的节点,也可以是父子节点。
可视化格式模型
所谓可视化格式类型,指的是浏览器在显示器上处理文档树。在这个模型中,每个文档中的元素都会根据框模型产生零个或多个框,这些框的布局受控于下面的几个因素:
- 框的尺寸和类型
- 定位模式(常规流?浮动?绝对定位?)
- 文档树中元素的关系
- 外部信息(视口大小?,图片真实尺寸?)
包含块
包含块是一个很重要的概念,可视化格式模型中很多行为的理论都和他有关:宽高为auto时的计算,绝对定位元素和浮动元素的定位等等
某个元素的包含块不一定是这个元素的父元素,流程如下:
常规流
常规流中的box都会存在于一个格式化上下文(formattig context)中,不同的格式化上下文决定了其内部子元素该如何排列。具体来说,块级元素会参与到块格式化上下文的布局中,行内元素会参与到行内格式化上下文的布局中。
1. 块格式化上下文BFC(block formatting context)
在block formatting context中,框会一个接一个地被垂直放置,它们的起点是一个包含块的顶部。两个兄弟框之间的垂直距离取决于margin属性。在block formatting context中相邻的块级元素的垂直边距会折叠。
你可以将块级格式化上下文想象成一个密封的大箱子,箱子外面的元素将不与箱子内的元素产生作用,此时在该div中将会呈现出如下的特征:
- 外边距将不再与上下文之外的元素折叠
- 其内可以包含浮动元素
- 可以阻止浮动元素被覆盖
- 框会一个接一个的被垂直放置,它们的起点是一个包含块的顶部(这意味着BFC中的文字将不会环绕邻接的浮动盒子排布,而是竖直排布——因为行框将会一个接一个的垂直放置)
触发块级格式化上下文的方式:
- 绝对定位
- display: inline-block
- display: table-cell/ table-caption
- overflow 非visible的元素