iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
2
Modern Web

重新認識 CSS系列 第 24

重新認識 CSS - formatting context & independent formatting context

前言

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

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

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

formatting context

看一下在不同 CSS level 的 spec 中是如何定義 formatting context。

CSS 2.1 內的「9.4 Normal flow」 是這樣定義 formatting context:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

也就是說,在 CSS 2.1 定義 normal flow 中的 box 屬於某種 formatting context,可是 block 或 inline,但不能同時使用。

而不同的 box 會參與不同的 formatting context:

但是在 CSS 2.2 內的同一個章節中,將定義改成以下內容:

Boxes in the normal flow belong to a formatting context, which in CSS 2.2 may be table, block or inline. In future levels of CSS, other types of formatting context will be introduced. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context. Table formatting contexts are described in the chapter on tables.

資料來源:CSS 2.2 - Appendix C. Changes

也就是說,在 CSS 2.2 定義 formatting context 可以是 table、block 或 inlline,並且說明在將來的 CSS level 會引入其他 type 的 formatting context。另外也可以看到在 CSS 2.2 刪掉了 CSS 2.1 中的 "but not both simultaneously" 這句,也就是其實 BFC 和 IFC 可以同時使用。

後來在 CSS Display Module Level 3 內也有定義 formatting context:

A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules. For example, a flex formatting context lays out boxes according to the flex layout rules [CSS3-FLEXBOX], whereas a block formatting context lays out boxes according to the block-and-inline layout rules [CSS2].

也就是說,formatting context 是一種環境,相關的 box 會在此環境中佈局,不同的 formatting context 會根據不同的規則來佈局這些的 box。

例如:

  • BFC (block formatting context) 會根據 block 和 inline 佈局規則來佈局 box
  • FFC (flex formatting context) 會根據 flex 佈局規則來佈局 box
  • GFC (grid formatting context) 會根據 grid 佈局規則來佈局 box

independent formatting context

一個 box 有兩種選擇:

  • 建立一個新的 independent formatting context
  • 繼續參與該 box 的 containing block 的 formatting context

而 box 建立的 formatting context 的 type 是由其 inner display type 來決定。

例如:

資料來源:


上一篇
重新認識 CSS - float
下一篇
重新認識 CSS - Block formatting context (BFC)
系列文
重新認識 CSS30

尚未有邦友留言

立即登入留言