ccs框模型与可视化格式模型

---

框模型

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的元素