iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 15
2

前文

在之前的篇幅中我們提到了 inline box 以及 block box 並且知道在 flow 流佈局中,inline box 會遵守著 IFC(inline formatting context) 而 block box(block formatting context) 會遵守著 BFC,formatting context 中文稱為格式化上下文,box 會去遵從在這個環境中的格式化上下文進行佈局,今天要談到的便是 BFC、IFC 各自佈局的特色,而在進入 BFC、IFC 前不知道你們有沒有注意到 context 中文翻譯「上下文」的這個單字,其實這個西方單字在中文裡沒有能比較直接對應的詞彙,我們來看看字典怎麼說。

劍橋字典這麼解釋這個單字:

the situation within which something exists or happens, and that can help explain it

牛津字典則這麼解釋:

The circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood.

我們可以看見 context 不單單指佈局,而是用環境、情況等單字去解釋 context,本身可以這麼理解:

https://ithelp.ithome.com.tw/upload/images/20190929/20111825rNkPnQAgTq.png

「在一個整體中,周圍的環境、因果脈絡、環境設定等東西,會根本性的影響「事件」本身的意義。」- 創誌

在不同文化造成的差異下,東方中沒有比較直接能對應這個詞彙的單字,就好比在加勒比海原始民族中並沒有細分「靈魂」、「生命」、「心」的概念,所以若是要把上面三種詞彙換成單一的字詞讓他們明白是困難的,因為他們本身就沒有區分這三個概念,自然也不會發展出能夠支撐這三個概念的詞彙了,而 context 之於中文也是如此,通常 context 會出現在電機、通訊等領域中,一般翻譯成上下文、語境,自 CSS 中的三維概念 stacking context 我們也可以再次看到這個詞彙被使用到。

規範中 formatting context 的節錄:
A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules.
直通車:CSS Display Module Level 3

回到規範中,我們可以這麼理解,格式化上下文代表著一種環境與之相關盒子會在這組環境中佈局,不同的格式上下文 box 將會根據不同上下文的佈局規則佈局。

formatting context 還有 flex、grid 等等。

了解上下文大約的概念後,我們就可以進入到 BFC、IFC 本身中:

BFC(block formatting context)

規範直通車:
CSS Display Module Level 3
規範定義:
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

BFC 之中,box 佔滿包含塊的寬度,並且根據它的包含塊,自頂部一個一個垂直排列,兄弟元素之間的垂直距離由 margin 所制定。這邊要特別小心我們之前提到的 margin-collapse,在參與同一個 BFC 之中的 block-level box 垂直方向上會產生,這時候就可以透過其他設置去避免掉這個情況,細節可以參照 margin collapse 的章節。

話說 Margin-collapse 是什麼呢? - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天

<div class="first">
  <span>1</span>
  <div class="second">
    <span>2</span>
    <div class="third">
      <span>3</span>
    </div>
  </div>
</div>

寬度會自動佔滿,所以 first = second = third 的寬度,若是本身參照寬度為 100% 的螢幕寬度,就不用再另行設置 100% 也同樣會佔滿寬度。

.first{
  background-color: pink;
}
.second{
  height: 100px;
  background-color: lightblue;
  position: relative;
  top: 50px;
}
.third{
  height: 100px;
  background-color: orange;
  position: relative;
  top: 50px;
}

A box either establishes a new independent formatting context or continues the formatting context of its containing block

通常元素形成的 block box 在 flow 中,會包含一組格式化上下文(有時候一個 box 中也會不只有一組格式化上下文,例如 display: table),在 box 只包含 inline box 狀態下會產生一組 IFC 給 inline box 有可以依循的格式化上下文,若是包含了 block box、同時包含 inline box 以及 block box 則會繼續讓後代元素參與 box 本身參與的 BFC,而非讓他們各自遵守 IFC、BFC,詳情可以見前一章的匿名盒子。

  • root 元素會產生 BFC,一般的 flow 佈局中,假如根元素後包含的子代都沒有新生成塊級格式化上下文,其 block box 遵守的是其包含塊 root 的 BFC 。

下列幾種狀態,會產生 BFC :

  1. root
  2. float 不為 none
  3. position: absolute、fiexed
  4. display: inline-blocktable-celltable-caption
  5. overflow 不為 overflow: visible
  6. display: flex 的子代元素
  7. display: grid 的子代元素
  8. ...。

更多會產生 BFC 的情況請參照 MDN: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

IFC

規範直通車:
CSS Display Module Level 3
規範定義:
An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.

IFC 是 inline box 所遵守的格式化上下文,特色是參與 IFC 的 box 會水平的一個一個排列,我們平常所見到的 imgspan 元素所生成的 box 都是遵守這個格式化上下文。inline box 遵守的 IFC 由包含它的 block container box 所生成,要記得的是 block container box 在 flow 中會新生成一組 IFC、或者就是讓它的後代遵守包含塊所參與的 BFC。

以這個例子來說,今天我們設置一組包含許多 <span><div>,而 <div> 此時的 block container box 會生成一組 IFC,而位於其中的 inline box 便可以去遵從這一組格式化上下文水平排列。

<div>
    <span>lorem</span>
    <span>lorem</span>
    <span>lorem</span>
    <span>lorem</span>
    <span>lorem</span>
...
    <span>lorem</span>
</div>
div{
  outline: 2px dashed orange;
  width: 30%;
}
span{
  outline: 1px dashed;
}

結語

上述提到了 box 所遵守的格式化上下文,除此之外還有諸如 flex formatting context、grid formatting context 等不同的格式化上下文,box 在其中的佈局會有不同的樣貌,我們明天見~


參考資料:

CSS Display Module Level 3
Visual formatting model
https://vide.tw/1351


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


上一篇
Visual Formatting Model - inline
下一篇
Visual Formatting Model - 三種定位
系列文
每天來點 CSS Specification30

1 則留言

0
ayugioh2003
iT邦新手 5 級 ‧ 2019-10-01 02:23:52

感謝解說 ~ 每次 BFC 的部份都是看過就忘,之後就得再重看一次 orz

太弱找不到不足的部份,只好幫忙抓錯字 XD。站滿 <- 佔滿

就不用再另行設置 100% 也同樣會站滿寬度

感謝提醒~已經修正囉!

我要留言

立即登入留言