iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
3
自我挑戰組

每天來點 CSS Specification系列 第 13

Visual Formatting Model - block

倘若不斷向深處扎根,就能茁壯成長 - RM

前言

在 flow 佈局中,元素主要可能生成的 box 類型分為兩種,在上一篇文章中我們有敘述到分別是 block-level box 以及 inline-level box,box 的類型會影響 UA 在視覺格式化元素時如何去佈局,包含 box 會參與不同的 formatting context、box 不同的類型有不同的特性,inline-level box 是水平排列、block-level box 垂直排列等等,今天和明天將針對這兩種 box 進行介紹。

display 屬性值決定了 box 的類型(這個經由 CSS 所設定的類型對於 document 本身定義是沒有影響的,它只涉及視覺部分。)

block-level elment and block box

規範直通車:
Visual formatting model
規範定義:
Block-level elements – those elements of the source document that are formatted visually as blocks (e.g., paragraphs) – are elements which generate a block-level principal box. Values of the ‘display’ property that make an element block-level include: ‘block’, ‘list-item’, and ‘table’.Block-level boxesare boxes that participate in a block formatting context.

  • Block-level elements 代表那些會生成 principal box 為 block-level 的元素。
  • principal box 是當元素生成一或多個 box 時會包含後代 box 以及組成內容的 box,它本身也是參與 position 定位佈局的 box。
  • block-level box 會參與 BFC 佈局。
  • block-level box 都會是 block container,什麼是 block container 呢?就是一個當內部只包含 inline-level box 時,會生成一組 IFC,且有一組包含所有 inline-level 的 root inline box。當內部包含 block-level box 實則內部 block-level 參與 BFC,且若是有 inline-level box 則它會被 anonymous block boxes 包覆。

舉例來說,屬於 block-level 的 display 屬性值包含:

  1. block
  2. list-item
  3. table
  4. flex
  5. grid
  6. ...等

display inside 會決定其後代 boxes 參與的格式化上下文,所以 block、table 儘管都是 block-level,後代 box 的佈局呈現受到不同的格式化上下文影響。

formatting context 格式化上下文,之後的文章中會提及,在此可以先把它當成一種會影響佈局的環境規則。

上文中提及的 anonymous block boxes 舉例來說就像今天我們有一個 div 包含了 inline-level box 以及 block-level box,但是 block container 只會同時包含 inline-level 或是 block-level 所以當同時擁有兩者時,後代 inline-level box 就會被 anonymous block boxes 包覆,如下面的例子。

<div>
  Some text
  <p>More text</p>.
</div>

https://ithelp.ithome.com.tw/upload/images/20190928/20111825NR67a44yYV.png

就像是上圖所述, Some text 會被一組 anonymous block box 包住。 沒錯!就是這麼霸道!

結語

以上講述了 block-level box 的定義以及舉例說明了 block container 上產生的行為,當我們新增了一個 block-level 元素時其實它所作用的行為比我們想像的更精密且複雜,若是想要參照中文也可以使用 MDN 上的 视觉格式化模型 - Web 开发者指南 | MDN 搭配規範參考呦,明天會介紹 inline-level box~我們明天見~


參考資料:

CSS Display Module Level 3
Visual formatting model


以上的部分有任何錯誤的地方,歡迎指正呦~非常感謝~~XD


上一篇
Visual Formatting Model - display
下一篇
Visual Formatting Model - inline
系列文
每天來點 CSS Specification30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言