前言
未完成
等我看完CSS Mastery的這一章我再回來(lái)钠四。
視覺(jué)格式化模型在干什么
現(xiàn)在我們聲明了許多個(gè)盒子和它們的margin踱阿，border透罢，padding等等，我們需要確定在屏幕上怎么去組織這些盒子虏肾，這就是CSSvisual formatting model的任務(wù)
Visual formatting model
什么是視覺(jué)格式化模型
慣例還是上MDN Visual formatting model
The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS.
反正意思就是這個(gè)東西是一個(gè)算法廓啊，把一個(gè)document顯示到visual media上的算法。(注：visual media指 screens, projectors and paper之類的)
視覺(jué)格式化模型把文檔里面的每個(gè)元素（指的html里面的元素）轉(zhuǎn)化成零個(gè)封豪，一個(gè)谴轮，或多個(gè)盒子(boxes)使其符合盒模型(box model)。這些盒子的布局由以下東西決定（詳情我在盒子模型的博文里面細(xì)講）：
- 盒子的尺寸: 被精確指明或者限制或者啥也沒(méi)有說(shuō)(比如width: 200px; 或 max-width:300px; 或者啥也沒(méi)說(shuō))
- 盒子的type: inline, inline-level, atomic inline-level, block.
- 盒子的position: in the normal flow, a float, or absolute positioning.
- 其他文檔樹(shù)里面的元素吹埠，childrens或者neighbors(比如父元素會(huì)被子元素?fù)伍_(kāi))
- The viewport size and position.(比如width: 100% 還有我不知道overflow那些算不算)
- Intrinsic dimensions of contained images. (第步？沒(méi)理解)
- Other external information. （沒(méi)理解）
盒子的生成 （Box generation）
我們知道了盒子和視覺(jué)格式化模型有密不可分的關(guān)系疮装，盒子的生成式視覺(jué)格式化模型的一部分，它從文檔中創(chuàng)建了不同類型的盒子粘都，并影響了視覺(jué)格式化的完成廓推。盒子的類型主要由display屬性決定。
塊級(jí)元素和塊盒子(block boxes)
一個(gè)元素如果display屬性是 block,list-item 或 table我們就稱為塊級(jí)元素翩隧，而塊級(jí)元素會(huì)在垂直方向堆疊樊展。
每個(gè)塊級(jí)元素參與 塊級(jí)格式化上下文BFC. 每個(gè)塊級(jí)元素生成至少一個(gè)塊級(jí)盒子(block-level box)叫principal block-level box ，一些元素像 list-item 元素, 可能生成更多的盒子來(lái)處理bullets(我認(rèn)為說(shuō)的應(yīng)該是前面的小黑點(diǎn)) 和一些其他的印刷元素堆生。更多的還是只生成 principal block-level box.
principal block-level box 包括后代生成的盒子(應(yīng)該說(shuō)的是子元素生成的盒子)和生成的內(nèi)容(generated content). It is also the box involved in the positioning scheme.
一個(gè)塊級(jí)盒子也可以是塊容器框（block container box）. 塊容器框（block container box）是一個(gè)盒子专缠，而這個(gè)盒子只塊容器框只包含塊級(jí)元素或建立IFC(inline formatting context)行內(nèi)級(jí)元素。這句話其實(shí)是塊容器框的特性顽频，而不是定義藤肢。her block-level boxes, or creates an , thus containing only inline boxes.
It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.
Block-level boxes that also are block container boxes are called block boxes.
匿名塊盒子(Anonymous block boxes)
In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.(比如偽類里面的content還有div里面的內(nèi)容textnode)
Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.
Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.
EXAMPLE
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
Unlike the <p> element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the <div>'s property value, like color to define the color of the text, and set the others to the initial value. For example, they won't have a specific background-color, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.
Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.
If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.
EXAMPLE
If we take the following HTML code, with <p>have display:inline and <span> have display:block :
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:
行級(jí)元素和行級(jí)盒子(Inline-level elements and inline boxes)
An element is said to be inline-level when the calculated value of its display CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.
(待補(bǔ)充)
匿名行盒子
(待補(bǔ)充)
