iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

從門外漢到前端新手系列 第 25

Day25 CSS:BFC(Block formatting context)

在認識BFC之前,首先我們要知道Positioning schemes(定位規則)Formatting context(格式化上下文)

Positioning schemes 定位規則:

  • normal flow
    我們在HTML的筆記中了解到,HTML元素就是inline跟block兩類,所以normal flow就是由水平排列,以及垂直向下排列這樣的格式來渲染元素。除非特別聲明,否則每個元素所產生的box都處在normal flow中。
  • float
    box從原本的normal flow中脫離出來,並以left、right參數來定位。通常用在文繞圖的排版中。
  • absolute positioning
    也是out of flow(脫離普通流)的定位,並以top、left、bottom、right搭配數值予以定位。

Formatting context 格式化上下文

Formatting context(格式化上下文) 是CSS中對於排版的概念,不同的格式化環境會有不同的渲染規則,決定box怎麼被排列、怎麼影響跟其它box的相對位置,也決定了其子元素的排列。formatting context有以下類型:

  • BFC(Block formatting context)
  • IFC(Inline formatting context)
  • FFC(Flex formatting context)
  • GFC(Grid formatting context)

以上都屬於normal flow的範圍。除了原本元素產生的原生box有block-level boxinline-level box之外,也可以用CSS的display屬性來改變box所參與的formatting context,有些屬性可以對box內創造一個formatting context的環境,例如生成BFCFFCGFC渲染環境給後代元素,而IFC是指元素參與IFC的佈局。

所有的element-box都存在<html>根元素這個block container內。可以放入block box ; 也可以放入inline box。前者參與BFC佈局 ; 後者參與IFC佈局。

擷取自[CSS規範]中對於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. For example, a flex formatting context lays out boxes according to the flex layout rules [CSS3-FLEXBOX], whereas a block formatting context lays out boxes according to the block-and-inline layout rules [CSS2].

Additionally, some types of formatting contexts interleave and co-exist: for example, an inline formatting context exists within and interacts with the block formatting context of the element that establishes it, and a ruby container overlays a ruby formatting context over the inline formatting context in which its ruby base container participates.

A box either establishes a new independent formatting context or continues the formatting context of its containing block. In some cases, it might additionally establish a new (non-independent) co-existing formatting context. Unless otherwise specified, however, establishing a new formatting context creates an independent formatting context. The type of formatting context established by the box is determined by its inner display type. E.g. a grid container establishes a new grid formatting context, a ruby container establishes a new ruby formatting context, and a block container can establish a new block formatting context and/or a new inline formatting context. See the display property.

BFC(Block formatting context)

在了解BFC時,會有一些術語需要釐清,block-level boxes是元素產生的block boxblocks containing boxes是包含後代元素的block box,這兩者都可單稱為block box


*該圖擷取自MDN

當一個box-level box參與了BFC佈局,它會撐滿整個容器寬度,並垂直向下排列,而如果box內包含了其它子元素,它本身成為了block containing box(塊容器)(也可稱為block container),它內部也是一個BFC的佈局環境:

  • 後代box的左外緣貼住它的左內緣。(如果flow是由右往左,則是子元素的右外緣貼著它的右內緣。)
  • 後代的 block box垂直排列,它本身會被垂直往下排列的box撐高(也能水平排列,如果它包含的是inline element的話)。
  • 垂直排列的box與box之間區隔的是margin,這些垂直排列的margin會有collapse的現象。

範例:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent本身為block box,參與了BFC佈局,而它本身又是block container,對內創造BFC佈局環境給後代元素。它的子元素.child本身參與BFC佈局,佔滿容器寬度,垂直向下排列,box之間的垂直間隔用margin區別(相鄰的box垂直方向margin會有collapse現象)。

創建新的BFC(Block formatting context)

以下條件會觸發元素創建新的BFC

  • 根元素<html>
  • 元素的float參數不為none
  • 元素的position參數為absolutefixed
  • 元素的display參數為inline-block
  • 元素的display參數為table-cell(HTML表格欄預設為該值)
  • 元素的display參數為table-caption(HTML表格標題預設為該值)
  • 元素的display參數為table, table-row, table-row-group, table-header-group, table-footer-group(分別是HTML<table><row><tbody><thead><tfoot>的預設值)
  • overflow參數不為visible的block元素
  • display參數為flow-root的元素
  • contain參數為layoutcontentpaint的元素
  • display參數為flexinline-flex元素的子元素
  • display參數為gridinline-grid元素的子元素
  • 元素的column-countcolumn-width參數不為auto,包括column-count: 1
  • column-spanall的元素始終會創建一個新的BFC
    *以上清單翻譯自MDN

創建一個新的BFC可以把它想成是,為了讓這個元素在某些條件下,仍然可以像個箱子一樣裝東西,所以創建一個新的BFC佈局環境給它的後代元素。目前可能還不會有感覺,但我們可以在之後提到的float屬性、positon屬性值為absolute時再來認識它的作用。

今天的筆記告一段落,明天見~

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。
/images/emoticon/emoticon41.gif


上一篇
Day24 CSS:淺談視覺格式化模型 Visual formatting model
下一篇
Day22 CSS:IFC(Inline formatting context)
系列文
從門外漢到前端新手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言