記得初學的時候就讀了規範9 Visual formatting model，以至於懷疑CSS可不可以學起來？有了些實作經驗後，再回來看看，看看有什麼新發現！本次搭配 W3C CSS Level 2.2

先來看看規範目錄章節安排

9 Visual formatting model

• 9.1 Introduction to the visual formatting model
• 9.2 Controlling box generation
• 9.3 Positioning schemes
• 9.4 Normal flow
• 9.5 Floats
• 9.6 Absolute positioning
• 9.7 Relationships between 'display', 'position', and 'float'
• 9.8 Comparison of normal flow, floats, and absolute positioning
• 9.9 Layered presentation
• 9.10 Text direction: the 'direction' and 'unicode-bidi' properties

再來看看規範說了什麼？

• 9.1 Introduction to the visual formatting model

• This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media.
• In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:
  • box dimensions and type.
  • positioning scheme (normal flow, float, and absolute positioning).
  • relationships between elements in the document tree.
  • external information (e.g., viewport size, intrinsic dimensions of images, etc.).

由以上得知

• 視覺格式化模型攸關ＵＡ(通常是瀏覽器啦)如何處理document tree和media。
• 在視覺格式化模型中，在document tree中的元素，都會根據box model，產生零個或多個box。而這些box受以下因素控制：
  • 盒子『範圍』和『類型』
  • 定位方案（正常流動、浮動和絕對定位）。
  • 文檔樹中元素之間的關係
  • 額外資訊（例如，視口大小、影像的固有尺寸等）。

再來看看ＭＤＮ

• In CSS, the visual formatting model describes how user agents take the document tree, and process and display it for visual media.
• This includes continuous media such as a computer screen and paged media such as a book or document printed by browser print functions. Most of the information applies equally to continuous and paged media.

好的，先簡單總結一下，知道了視覺格式化模型，就是ＵＡ如何處理『將文檔轉化成可以在瀏覽器或其他視覺媒體上顯示的格式』。這個模型考慮了文檔的結構、內容、樣式、媒體特性和用戶互動等多個因素。而重點就是去了解：

• box dimensions and type
  盒子範圍和類型
• positioning scheme (normal flow, float, and absolute positioning).
  定位方案（正常流動、浮動和絕對定位）。
• relationships between elements in the ocument tree
  文檔樹中元素之間的關係。
• external information (e.g., viewport size, intrinsic( dimensions of images, etc.)
  額外資訊（例如，視口大小、影像的固有尺寸等）

這是Udemy上的一堂課Advanced CSS and Sass講到的網頁運作原理流程，可看到 website rendering the Visual formatting model 所處的位置！

see you