iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 13
2
自我挑戰組

前端新手進化史系列 第 13

視覺格式化模型-Box generation(上)

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


前言

視覺格式化模型會依據盒子模型(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,因它是連結外部的圖片,而不是用來裝其他元素的盒子。




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

/images/emoticon/emoticon49.gif


參考資源

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


上一篇
Containing block
下一篇
視覺格式化模型-Box generation(中)
系列文
前端新手進化史30

2 則留言

0
RURU Tseng
iT邦新手 4 級 ‧ 2019-09-29 00:03:58

寫得超精細!!!推推~~
/images/emoticon/emoticon42.gif

yachen iT邦新手 5 級 ‧ 2019-09-29 10:56:10 檢舉

RU~大師光臨 寒舍蓬蓽生輝啊 /images/emoticon/emoticon32.gif

0
Titangene
iT邦新手 5 級 ‧ 2019-09-29 00:28:50

突然什麼都懂了

/images/emoticon/emoticon07.gif

yachen iT邦新手 5 級 ‧ 2019-09-29 10:57:41 檢舉

真不愧是讀完 level 3 spec 的人/images/emoticon/emoticon34.gif

我要留言

立即登入留言