「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加了解 CSS 的原理，讓我在切版的時候可以更加確定自己在做什麼，我踩到的雷只是因為我不夠了解它才會炸開。
在這 30 天的內容中，會將 Spec 內看到的資料整理成這個系列，也希望正在學 CSS 的各位可以更加了解它。另外我也會同時將文章發至我的 Blog，如果想直接看文內的程式碼 Demo 畫面，可以到我的 Blog 來看。
「重新認識 CSS」系列文章發文於：
下面是 CSS 2.2 對於 containing block 的定義：
In CSS 2.2, 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.
很多 box 的位置和大小都是根據某種矩形框 (rectangular box) 來計算的，在 CSS 定義中，就將此 box 稱為 containing block。通常會把產生的 box 作為 descendant box 的 containing block，也就是說一個 box 會為它的 descendant 建立 containing block。當我們在說 "一個 box 的 containing block" 是代表 "box 所在的 containing block"，而不是該 box 所產生的 containing block。
元素的 containing block 定義如下：
root 元素 (也就是 <html> ) 所在的 containing block 是一個被稱為 initial containing block 的矩形。對於 continuous media 來說，containing block 的尺寸是由 viewport 的尺寸，並且被固定 (anchored) 在 canvas 的開始位置 (origin)；對於 paged media 來說，containing block 的尺寸就是 page area
當其他元素的 position 屬性為 relative 或 relative 時，containing block 是由最近的 ancestor box 的 content edge 所構成，該 ancestor box 是 block container 或建立了 formatting context
如果元素為 position: fixed 時，則在 continuous media 的情況下由 viewport 建立 containing block，在 paged media 的情況下由 page area 建立 containing block
如果元素為 position: absolute 時，則 containing block 是由最近的 position 屬性為 absolute、relative 或 relative 的 ancestor 建立，方法如下：
如果沒有這樣的 ancestor，則 containing block 就是 initial containing block
雖然每個 box 都會根據其 containing block 來決定位置，但不會被 containing block 所限制，可能會發生 overflow。當發生 overflow 時，可以使用 CSS 提供的 overflow 屬性來處理，這在之後會提到。
有關 overflow 的詳情，可參閱我之後寫的「重新認識 CSS - overflow」。
資料來源：
iThome鐵人賽
看影片追技術