visual formatting model (可视化格式模型）【持续修正】

if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

在一个块包含框里面，只要有一个块级框，就认为，这个块框里面只能包含块级框。

 （显然，可视化格式模型是重block轻inline的，在定义block-level elements时，它说只要像一个块的元素就是块级元素，定义inline-levels时说，不像一个块的元素就是行内级元素。这里又是，只要包含了块级框就只能有块级框）

在一个行框里面，如果有一个文档流内的块级框，这个行框就会被打断为两部分，分别放到一个匿名块框里面，分布在这个块级框的两侧。例如：

<p style="display: inline">
    This is anonymous text before the SPAN.
    <span style="display:block">This is the content of SPAN.</span>
    This is anonymous text after the SPAN.
</p>

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

如果一个块包含框里面有行框而没有块框，没有包含在行框里面的文字就会被包在匿名行框内，例如：

<p>Some <em>emphasized</em> text</p>

要注意只有文字会产生匿名框，也就是说，空白不会产生匿名框。这也就解释了为什么在HTML无论添加多少空格或换行符最终在浏览器中都会显示成为一个空格。

综上，以下三种情况会产生匿名框：

1. 块包含框里面有块框时，行框会被包含在匿名块框里面。
2. 块包含框里面只有行框时，不在框内的文字会被包含在匿名行框里面。
3. 行框里面有文档流内的块级框时，行框会被打断，然后分别被包含在匿名块框里面分布在块框两侧

匿名框只是为了排版而产生，无法通过它来设置样式，它会继承非匿名的父框的可继承样式。他的包含元素也不会用它的宽度或高度来计算相应的值。

定位规则是根据position属性和float属性来计算一个盒子的位置的。

• • Block formatting contexts  块级格式化上下文

在块级格式化上下文中，框是在垂直方向一个接着一个的摆放的。框与框之间的垂直距离由padding、border、margin决定，同一个块级格式化上下文中的相邻margin会发生折叠。

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

以下情况下的框，会为自己包含的内容创建一个新的BFC。

1. float:left/right
2. position:absolute
3. display:inline-block/table-cell/table-caption
4. overflow:hidden/scroll/auto

• • Inline formatting contexts  行内级格式化上下文

在行内级格式化上下文中，框是在水平方向上一个接着一个的排列。他们之间的水平距离由padding、border、margin来决定。每一行的框都放在一个盒子里，这个盒子称为line box(行盒)。

行盒的高度总是能包含住它里面的框，除非用line-height属性强制规定它的高度。如果没有浮动的话，行盒的宽度由他包含的框的总宽度决定，如果出现浮动，行盒会变窄，为浮动让位。

• Relative positioning

框相对于在流内的位置移动，像是一个框精分成一个透明的自己，用于在流中占据位置，还有一个想去远方的自己，根据透明的自己进行定位，覆盖在流内的框之上。

精分是它个人的行为，不会对其他的框的位置产生影响。

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!