前言

未完成

等我看完CSS Mastery的這一章我再回來。

視覺格式化模型在干什么

現在我們聲明了許多個盒子和它們的margin，border，padding等等，我們需要確定在屏幕上怎么去組織這些盒子，這就是CSSvisual formatting model的任務

許多個盒子 怎么去組織它們

Visual formatting model

什么是視覺格式化模型

慣例還是上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.

反正意思就是這個東西是一個算法，把一個document顯示到visual media上的算法。(注：visual media指 screens, projectors and paper之類的)

視覺格式化模型把文檔里面的每個元素（指的html里面的元素）轉化成零個，一個，或多個盒子(boxes)使其符合盒模型(box model)。這些盒子的布局由以下東西決定（詳情我在盒子模型的博文里面細講）：

• 盒子的尺寸: 被精確指明或者限制或者啥也沒有說(比如width: 200px; 或 max-width:300px; 或者啥也沒說)
• 盒子的type: inline, inline-level, atomic inline-level, block.
• 盒子的position: in the normal flow, a float, or absolute positioning.
• 其他文檔樹里面的元素，childrens或者neighbors(比如父元素會被子元素撐開)
• The viewport size and position.(比如width: 100% 還有我不知道overflow那些算不算)
• Intrinsic dimensions of contained images. (？沒理解)
• Other external information. （沒理解）

盒子的生成 （Box generation）

我們知道了盒子和視覺格式化模型有密不可分的關系，盒子的生成式視覺格式化模型的一部分，它從文檔中創建了不同類型的盒子，并影響了視覺格式化的完成。盒子的類型主要由display屬性決定。

塊級元素和塊盒子(block boxes)

一個元素如果display屬性是 block,list-item 或 table我們就稱為塊級元素，而塊級元素會在垂直方向堆疊。

每個塊級元素參與 塊級格式化上下文BFC. 每個塊級元素生成至少一個塊級盒子(block-level box)叫principal block-level box ，一些元素像 list-item 元素, 可能生成更多的盒子來處理bullets(我認為說的應該是前面的小黑點) 和一些其他的印刷元素。更多的還是只生成 principal block-level box.
principal block-level box 包括后代生成的盒子(應該說的是子元素生成的盒子)和生成的內容(generated content). It is also the box involved in the positioning scheme.

一個塊級盒子也可以是塊容器框（block container box）. 塊容器框（block container box）是一個盒子，而這個盒子只塊容器框只包含塊級元素或建立IFC(inline formatting context)行內級元素。這句話其實是塊容器框的特性，而不是定義。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.

image.png

匿名塊盒子(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里面的內容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>

image.png

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:

image.png

行級元素和行級盒子(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.
(待補充)

匿名行盒子

(待補充)

正常流、浮動、絕對定位