CSS视觉格式化模型，你真的了解么？ _CSS

css视觉格式化模型（visual formatting model）是用来处理文档并将它显示在视觉媒体上的机制。这是CSS 2.1的一个基础概念。视觉格式化模型根据CSS盒模型为文档的每个元素生成0，1或多个盒。每个盒的布局由如下内容组成：

盒尺寸：明确指定，受限或没有指定
盒类型：块级盒（block-level box），行内级别盒（inline-level box），行内盒（inline-box)，原子行内级别盒（atomic inline-level box）
定位方案（position scheme）：常规流（normal flow），浮动或绝对定位（包括absolute和fixed）
文档树中的其他元素：它的子节点与兄弟节点
视口（viewport）的尺寸与位置：屏幕上的一个窗口或其他可视化区域
内含图片的固定尺寸
其他信息

一个盒子相对于它的包含块（containing block）的边界来渲染。通常盒为它的后代元素建立包含块。但是盒并不受它的包含块的限制，当它的布局跑到包含块的外面时，称为溢出（overflow）。
注：包含块（containing block）定义和块容器盒（block container box）概念不同。
盒的生成（Box generation）CSS视觉格式化模型的一部分工作是从文档元素生成盒。生成的盒拥有不同的类型，并影响视觉格式化模型本身。生成盒的类型取决于CSS属性display 。
1、块级元素与块盒（Block-level elements and block boxes）块级元素（block-level elements）：display为block，list-item，table
块级盒（block-level-box）：块级盒参与块级格式化上下文（block formatting context）。每个块级元素至少生成一个块级盒，称为主要块级盒（principal block-level box）。一些元素，如<li>，会生成额外的盒来放置项目符号，不过多数元素只生成一个主要块级盒。
块容器盒（block-container box）：块级盒中除了table box和可替换元素之外，均是块容器盒。其他的块级盒不是块容器盒，如不可替换的行内块和不可替换的table cell 。块容器盒要么只包含块级盒（table box和可替换元素除外），要么生成一个行内格式化上下文（inline formatting context，只包含行内盒，如inline-block）。
块盒（block boxes）：既是块级盒，又是块容器盒的盒是块盒。
块级盒和块容器盒对比：块级盒描述元素跟它的父元素与兄弟元素之间的关系。块容器盒描述元素跟它的后代之间的影响。

文章插图

术语：
元素：元素是文档结构的基础，在CSS里面，每个元素生成了包含内容的盒（box）。
可替换元素：浏览器根据其标签的元素与属性来判断显示具体的内容，CSS渲染模型不考虑替换元素内容的渲染，这些替换元素的展现独立于CSS 。比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样。(X)html中的<img>、<input>、<textarea>、<select>、<object>、<video>都是替换元素，这些元素都没有实际的内容。<audio>和<canvas>在某些情况下也是可替换元素。
替换元素通常有其固有的尺寸：一个固有的宽度、一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
固有尺寸是指宽度和高度是有元素自身定义的,不受周围元素的影响。CSS没有定义如何去寻找替换元素的固有尺寸。在CSS 2.1中,只有替换元素可以有固有的尺寸。对于没有可靠的解析度信息的光栅图像,必须假定一个图像源像素为一个px单位。
一些CSS属性比如vertical-align可能会用到替换元素的固有尺寸或基线。
不可替换元素：替换元素之外的所有其他元素都是不可替换元素，由CSS视觉格式化模型负责不可替换元素的渲染，可以直接显示出来。例如<div>，<p> 。
1.1 匿名块盒（Anonymous block box）匿名块盒是根据需要而添加的补充性盒。
情况一：请看以下代码：
<div>some text<p>more text</p></div>设置div和p的display为block，some text就形成了一个匿名块盒。匿名块盒没有名字，也不能被CSS选中，所有的CSS属性值为inherit，非继承的CSS属性值为initial 。
块容器盒要么只包含行内级盒，要么只包含块级盒。在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。