前言

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

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

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

• iT 邦幫忙
• Titangene Blog

在 IFC 中，box 會從一個 containing block 的頂端開始一個接著一個的方式來水平排列，而 box 之間會受到水平的 margin、border 和 padding 影響，但不會被垂直的 margin、border 和 padding 所影響。

box 可以以不同的方式垂直對齊：

• 它們的 bottom 或 top 可以對齊
• box 內的 text 的 baseline 可以對齊

inline box (inner display type 為 flow 的 non-replaced inline-level box) 的內容會參與跟該 inline box 本身相同的 IFC

block container 在某些情境下會建立新的 IFC：

IFC 是由不包含 block-level box 的 block container 所建立的。當元素的 block container 只包含 inline-level content 時，block container 會建立新的 IFC，然後該元素還會產生一個 root inline box，該 root inline box 會 wrap 那些 inline content。

root inline box 是一個 anonymous inline box，該 box 會自動產生可以容納 block container 的所有 inline-level content。

有關 anonymous inline box 的詳情，可參閱我前幾天寫的「重新認識 CSS - Visual formatting model：Box generation (inline)」，內有提供實際範例說明，在此篇就不再追述。

資料來源：

• CSS 2.2 - 9.4.2 Inline formatting contexts
• CSS Display Module Level 3
• CSS Inline Layout Module Level 3