iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
1

前言

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

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

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

在 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 - Block formatting context (BFC)
下一篇
重新認識 CSS - overflow
系列文
重新認識 CSS30

尚未有邦友留言

立即登入留言