文章將陸續整理並更新至個人部落格。

前言

視覺格式化模型會依據盒子模型(box model)將元素轉換為一個個盒子(box)，並且根據盒子的 containing block(包含塊)邊界來渲染盒子。盒子的類型為決定盒子如何佈局主要因素之一，而盒子的類型會取決於元素的 display 屬性。

盒子的類型

根據 display 的 outer display type，元素所生成的盒子類型可分成 block-level box 與 inline-level box 二大類，其中 inline-level box 又可細分為 inline box 與 atomic inline-level box：

• block-level box (塊級盒)

• inline-level box (行內級盒)

  • inline box (行內盒)
  • atomic inline-level box (原子行內級盒)

block-level box

摘自W3C

Block-level boxes are boxes that participate in a block formatting context.
Block-level boxes that are also block containers are called block boxes.

也就是說，block-level boxes 會參與block formatting context(BFC)，且若 block-level boxes 同時為 block containers，則又稱為 block boxes。

蛤？怎麼又冒出一個 block container？

剛提到，block-level boxes 是取決於 outer display type，那有 inner display type?
猜到了嗎，block container 就是取決於 inner display type。

至於什麼是 BFC，可參考另一篇文章 CSS 原理 - Block Formatting Context。

block-level box

取決於 display 的 outer display type，元素本身會參與 BFC，呈現垂直排列。

block container box

取決於 display 的 inner display type，可以建立 BFC 或 IFC，影響其後裔元素的佈局。

其實還有其他種 containers，在另一篇文章 CSS 原理 - 你所不知道的 display 有較詳細的介紹。

下方為 W3C display 表格

圖片來源：W3C

註： replaced element(例如 <img>)，即使將其設定為 display: inline-block ，也不會生成 block container box，因它是連結外部的圖片，而不是用來裝其他元素的盒子。

介紹完「塊」族盒子，明天將繼續介紹「行內」族的盒子～

參考資源

W3C-Controlling box generation
W3C-Appendix A: Glossary
W3C-Box Layout Modes: the display property
MDN-Visual formatting model