副标题[/!--empirenews.page--]
The CSS visual formatting model is an algorithm that processes a document and displays it on visual media.
它是一种规则，用于规定用户代理如何将DOM树展示在可视化媒体中。
通俗的说，我们在HTML中写一个p标签，在浏览器中打开之后，他会是以什么样子展现出来（他的宽度、高度是多少，他在哪里，他与相邻的元素是什么关系。）这些，都是由这个规则来决定。
那么它是如何决定的呢？
首先，他先给每个DOM元素都穿上一套衣服，即框。
In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model
在可视化格式模型中，一切都是框。
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates at least one block-level box.
Except for table boxes, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.
Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.
A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object> tags), and form elements (<button>, <textarea>, <input>, and <select> tags).
- 块级元素产生一或多个块级框（block-level box），块级框用来参与块级格式化上下文（block formatting context）。
- 块级包含框是除了表格框和可替换元素(replaced element)之外的块级框。块级包含框要么只包含块级框要么只包含行内级框。
- 即是块级框又是块级包含框的，叫做块框。
其实这三个概念不过就是把块状的框分成三个大类：
display: block、table、list-item、non-replaced inline-block、replaced inline-block、non-replaced table cell、replaced table cell。
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box
- 和块级元素相似，行内级元素（Inline-level elements）也会产生行内级框（inline-level boxes），行内级框用来参与行内级格式化上下文。
- 行框（inline box）是行内级框且他的包含元素参与它自己的行内级格式化上下文的框。display为inline的非替换元素产生的框叫做行框，display为其他值的行内级元素产生的框叫做原子级行内级框。
display: non-replaced inline、inline-block、replaced inline、 inline-table
匿名框又分为匿名块框（Anonymous block boxes）和匿名行框（）
上面提到：
- 在可视化格式模型中，一切皆是框。
- 块级包含框里面只能有块级框或只能有行内级框。
那么，如果在一个块级框里面添加一行文字呢？
<div>
Some text
<p>More text</p>
</div>
这时候，会产生一个匿名块框包裹住“Some text”。W3C上面的示意图：
为什么会产生匿名块框而不是匿名行内框呢？
（编辑：济南站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
