iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 20
3
Modern Web

重新認識 CSS系列 第 20

重新認識 CSS - Visual formatting model:Box generation (inline)

前言

「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加了解 CSS 的原理,讓我在切版的時候可以更加確定自己在做什麼,我踩到的雷只是因為我不夠了解它才會炸開。

在這 30 天的內容中,會將 Spec 內看到的資料整理成這個系列,也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog,如果想直接看文內的程式碼 Demo 畫面,可以到我的 Blog 來看。

「重新認識 CSS」系列文章發文於:

在 visual formatting model 中,document tree 中的每個元素都會根據 box model 生成 0 個或多個 box。

box 分為兩種不同的 type:

  • block
  • inline

使用 display 屬性可以決定 box 的 type,不同的 box type 會影響 UA 在 visual formatting model 中要如何去佈局,之前介紹了 block 部份,本篇會來介紹 inline 部份。

如果想瞭解 block 部份,可參閱在此系列中的另一篇「重新認識 CSS - Visual formatting model:Box generation (block)」。

Inline-level 元素 & inline boxes

inline-level 元素:

  • source document 中不構成新內容的 block 的元素 (例如:段落內的 em 元素)
  • 內容以 line 分佈 (例如:段落內的強調 (emphasized) text 片段、inline 圖片等)
  • 產生 inline-level box 的元素
  • 當元素的 display 屬性值為 inlineinline-tableinline-block 時,則該元素就會成為 inline-level 元素

inline-level box:

  • 參與 IFC 的 box

inline box:

  • 既是 inline-level box,且該 box 的內容會參與該 box 的 containing IFC 的 box
  • display 屬性值為 inline 的 non-replaced 元素會產生 inline box

atomic inline-level box:不是 inline box 的 inline-level box,作為 single opaque (不透明) box 參與該 box 的 IFC,例如:

  • replaced inline-level 元素
  • inline-block 元素 (元素會產生 principal inline-level block container,inline-block 的內部會被格式化為 block box,元素本身會被格式化為 atomic inline-level box)
  • inline-table 元素 (參與 IFC 的 rectangular block)

如下圖:

Anonymous inline boxes

任何直接包含在 block container 元素內 (不在 inline 元素內) 的 text 都必須被視為 anonymous inline 元素。

例如:

<p>Some <em>emphasized</em> text</p>

p 元素產生 block box,其中包含幾個 inline box:

  • "emphasized" 文字的 box 是由 inline 元素 (也就是 em 元素) 產生的 inline box
  • 其他 box ("Some" 和 "text") 都是由 block-level 元素 (也就是 p 元素) 產生的 inline box
    • 而此 box 被稱為 anonymous inline box,因為它們都沒有關聯 (associated) 的 inline-level 元素

此類的 anonymous inline box 從其 block parent box 繼承可繼承的屬性。非繼承屬性具有其 initial value。在此範例中,anonymous inline box 的 color 會繼承至 p 元素,但是 background 會是透明的。

本文的內容主要是依據 CSS 2.2 中的定義來說明,如有錯誤之處,歡迎告知,感謝 : )。

資料來源:


上一篇
重新認識 CSS - Visual formatting model:Box generation (block)
下一篇
重新認識 CSS - display
系列文
重新認識 CSS30

尚未有邦友留言

立即登入留言