iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
3
自我挑戰組

每天來點 CSS Specification系列 第 11

Visual Formatting Model - 定義、containing block

倘若不斷向深處扎根,就能茁壯成長 - RM

前言

今天主要會介紹 Visual Formatting Model 定義,以及每個元素所生成的 box 的 containing block。

瀏覽器與 visual formatting model

規範定義:
This chapter and the next describe thevisual formatting model: how user agents process the document tree for visual media .
規範直通車:
Visual formatting model

在 UA 解析 document 時,會遵守的計算規則便是 visual formatting model ,它決定了 document 的佈局規則,以及元素會生成零至多個 box 便遵守著定義的佈局規則,而若元素是 display: none 的狀態便不會進行渲染佈局,在規範中有敘述,visual formatting model 中主要有幾項重點:

  1. 元素的 box 類型及尺寸
  2. box 的定位方法
  3. box 間相互的關係
  4. 其他的外部資訊(viewport 大小、圖片自帶大小等等)

在 Visual Formatting Model 中,所有的元素主要有兩種類型,其中一種代表的是內容的 inline-level box 、一種代表的是區塊的 block-level box,以我們平常使用的元素來說,inline-level box 就有 <a><span><button><img>等等,它們本身像是內容。block-level box 則有 <header><main><section><footer> 等等,區分的方式可以透過它們的排列方式看見端倪,inline-level box 本身水平排列、block-level box 本身是一個接著一個垂直排列。

主要的 box 類型:

  1. inline-level box
  2. block-level box

而 box 之前有提到是 document 中的每個可以視覺化的元素所生成的一個矩形框 box,不同類型的 box 會遵守不同的上下文,block-level box 好比 <nav><footer> 像是元素產生了一個塊狀的盒子,並且在這個區域中可以放入新的 block-level box 內容以及 inline-level box 內容,這個涉及到 block-level box 本身可以產生新的佈局上下文如同 BFC、IFC、independent formatting context 等。

簡單來說,生成 box 的元素每個都有自己的 box 類型,而每個 box 依照不同的類型決定會參與什麼樣的 Formatting Context , Formatting Context 可以想像成一組 box 在那種環境下會去依循的關係,之後會針對 Formatting Context 去做較為詳細的介紹。

containing block

規範定義:
In CSS2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box “establishes” the containing block for its descendants. The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates.
規範直通車:
Visual formatting model

元素生成的 box 位置時常是跟隨著某個矩形去計算,CSS 將其定義為所謂的 containing block ,對於不同的情況下,通常我們說的包含塊是指每個 box 所參照的那個包含塊,包含塊分別為:

  1. initial containing block:根元素的 containing block,在 html 中 root 表示 <html>
  2. 元素為 position: static、relative ,包含塊由最近的祖先元素生成,通常是元素上面生成 BFC、Block-containing box 的元素。
  3. 元素為 position: fixed,則 containing block 由 viewport 建立。
  4. 元素為 position: absolute 包含塊為最近的非 position: static 元素。

舉例來說,當我今天建立了如下的 HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Illustration of containing blocks</title>
    </head>
    <body id="body">
        <div id="div1">
        <p id="p1">This is text in the first paragraph...</p>
        <p id="p2">This is text <em id="em1"> in the
        <strong id="strong1">second</strong> paragraph.</em></p>
        </div>
    </body>
</html>

CSS 如下:

#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }

它們本身各自的包含塊以上述例子來說就像是:

  • html 對應初始包含塊,因為根元素在規範中會有個初始化的包含塊 initial containing block
  • body 對應 html,因為body 本身符合 position: static、relative ,包含塊由最近的祖先元素生成,通常是元素上面生成 BFC,以這個情況來說就是 html。
  • div1 對應初始包含塊,它本身為 position: absolute包含塊由最近的非 position: static 元素生成。
  • p1、p2 對應div1 ,它本身為 position: static、relative ,如同上述點二。
  • em1 對應初 div1,它本身為 position: absolute包含塊由最近的非 position: static 生成。
  • strong1 對應 em1 ,它本身為 position: static、relative ,如同上述點二。

但是在此提到的包含塊細節來自於 position Level 3,仍是 WD 草案階段,所以在細節及方向上都可能在進行變動,要注意這點呦~

結語

上述介紹的 containing block、及 Visual Formatting Model 本身有許多規則, containing block 講述 box 在定位時參照的定為基準 box,Visual Formatting Model 代表 UA 如何去解析 document 並呈現在視覺媒體上的一套邏輯規則,我們明天見~


參考資料:

浏览器的工作原理:现代网络浏览器幕后揭秘 - HTML5 Rocks
https://www.w3.org/TR/CSS2/visuren.html#q9.0
https://www.w3.org/TR/css-display-3/#block-box


以上的部分有任何錯誤的地方,歡迎指正呦~非常感謝~~XD


上一篇
在看 Visual Formatting Model 之前,先說些別的~
下一篇
Visual Formatting Model - display
系列文
每天來點 CSS Specification30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Chris
iT邦新手 4 級 ‧ 2019-09-27 13:32:54

還沒看完,我已經打開 Youtube 的首頁....
(下一篇,可以在每一段的最後附上連結)

首頁真的有股神秘的力量!!!!!!
/images/emoticon/emoticon42.gif

Titangene iT邦新手 4 級 ‧ 2019-09-27 23:15:17 檢舉

補上參考連結:YouTube

我要留言

立即登入留言