傳說中的BFC

時間 2020-02-27

標籤傳說中 bfc 简体版

原文原文鏈接

HTML&CSS重點知識點合集第二篇。其他文章見文末。html

1、BFC（Block Formatting Context）

前一章咱們瞭解了語義化HTML結構的重要性，也清楚了在寫網頁結構時如何去寫，如今咱們來看看HTML5和CSS中一個很是重要的知識點——BFC。web

(1). BFC

BFC（Block Formatting Context），顧名思義，塊格式化上下文。在講它以前，咱們先來看看下面兩點：瀏覽器

首先，什麼是盒子？什麼又是塊盒子？佈局

CSS有一個概念，叫CSS視覺格式化模型（visiual formatting model）。它是用來處理和在視覺媒體上顯示文檔時使用的計算規則。它會根據CSS盒子模型將文檔中的元素轉換爲一個個盒子。也就是說，它定義了盒子的生成。盒子主要包括了塊盒、行內盒、匿名盒以及一些實驗性的盒子，盒子的類型由 display 來決定。post

塊盒子（Block Box），前面說了，盒子的類型由屬性 display 來決定。當元素的 display 爲 block 、 list-item 或 table 時，這個元素就將是塊級元素。一個塊級元素會被格式化成一個塊，默認按照垂直方向排列。每一個塊級元素都會生成至少一個塊級盒子（即主塊級盒子，principal block-level box），而且每一個塊級盒子都會參與塊格式化上下文的建立。學習

咱們說了塊級盒子，那塊級盒子和塊盒子是啥關係？flex

咱們先來看看另外一個概念——塊容器盒子。塊容器盒子指的是該元素的直接子元素只有塊級盒子或只有行內級盒子。flexbox

A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.3d

若是仍是理解起來有些費力，咱們不妨來看張圖片：code

知道塊容器盒子的概念後，咱們再來講塊盒子。塊盒子就是塊容器盒子的一個子集，即當塊容器盒子內的元素所有都是塊級盒子時，它就是塊盒子。有點繞？其實咱們能夠簡單的理解成，塊盒子就是塊容器盒子中的元素都是塊級盒子。行內盒（Inline Box）& 匿名盒（Anonymous Block Boxes）詳情請見：盒類型。

其次，盒子的定位方案有哪些？

在佈局的時候，瀏覽器會根據元素的盒類型和上下文對這些元素進行定位。定位時有三種定位方案，分別是常規流，浮動以及絕對定位。

常規流（Normal flow）

在常規流中，盒子一個接一個的排列
在塊級格式上下文中，它們在豎直方向上依次排列
在行內格式上下文中，它們在水平方向上依次排列
當 position 爲 static 或 relative，而且 float 爲 none 時會觸發常規流
對於靜態定位（默認定位，position 的值爲 static），盒的位置是常規流佈局。
對於相對定位（ position 的值爲 relative），盒偏移的位置由 top，bottom，left，right 定義。不過，即使有偏移，仍然保留原有的位置。

浮動（Float）

盒子稱爲浮動盒

絕對定位（Absolute positioning）

絕對定位方案，盒子會從常規流中移除，不影響常規流的佈局
它的定位相對於它的父元素
當元素的 position 的值爲 absolute 或 fixed，它就是絕對定位元素
對於 position: absolute，元素的定位將相對於最近的一個 ralative、fixed 或 absolute的父元素，若是沒有則相對於 body。