BFC的概念及作用

2022-08-20 16:21:14 字數 1607 閱讀 4981

在了解什麼是bfc之前,首先得明白什麼是box , formatting context (乙個決定如何渲染文件的容器)的概念

box: css布局的基本單位

box是 css 布局的物件和基本單位, 直觀點來說, 就是乙個頁面是由很多個 box組成的, 元素的型別和display屬性, 決定這個box的型別, 不同型別的box, 會參與不同的formatting context, 因此box內的元素會以不同的方式渲染, 其盒子的型別分別為:

formatting context :是w3c css2.1規範中的乙個概念,它是頁面中的一塊渲染區域, 並且有一套渲染規則,他覺得了子元素如何定位, 以及和其他元素關係和相互作用

最常見的 formatting context 有 block fomatting context (簡稱bfc)和 inline formatting context (簡稱ifc)。

css2.1 中只有bfcifc,css3中還增加了gfcffc。

bfc 定義: bfc(block formatting context)直譯為「塊級格式上下文」, 它是乙個獨立渲染區域,只有block-level box參與, 他規定內部的block-level box如何布局, 並與這個區域外部不相干

bfc布局規則:

內部的box會在垂直方向,乙個接乙個地放置。

box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊

每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。

bfc的區域不會與float box重疊。

bfc就是頁面上的乙個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。

計算bfc的高度時,浮動元素也參與計算

哪些元素會參生bfc

根元素float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

自適應兩欄布局,根據bfc布局規則第3條:每個元素的margin box的左邊, 與包含塊border box的左邊相接觸(對於從左往右的格式化,否則相反)。即使存在浮動也是如此。因此,雖然存在浮動的元素aslide,但main的左邊依然會與包含塊的左邊相接觸。根據bfc布局規則第四條:bfc的區域不會與float box重疊。我們可以通過通過觸發main生成bfc, 來實現自適應兩欄布局.main

bfc後,這個新的bfc不會與浮動的aside重疊。因此會根據包含塊的寬度,和aside的寬度,自動變窄。

DATA GUARD的概念及作用

data guard的最主要的功能是冗災。當然根據配置的不同,data guard還可以具備以下特點 高可用 效能提公升 資料保護以及故障恢復等。data guard可以分為物理standby和邏輯standby兩種。二者的最大差別在於,物理standby應用的是主庫的歸檔日誌,而邏輯standby...

尾遞迴的概念及作用

如果乙個函式中所有遞迴形式的呼叫都出現在函式的末尾,我們稱這個遞迴函式是尾遞迴的。當遞迴呼叫是整個函式體中最後執行的語句且它的返回值不屬於表示式的一部分時,這個遞迴呼叫就是尾遞迴。尾遞迴函式的特點是在回歸過程中不用做任何操作,這個特性很重要,因為大多數現代的編譯器會利用這種特點自動生成優化的 原理 ...

子網掩碼的概念及作用

一 子網掩碼的概念及作用 子網掩碼 subnet mask 又叫網路掩碼 位址掩碼 子網路遮罩,是乙個應用於 tcp ip 網路的 32 位二進位制值。它可以遮蔽掉 ip 位址中的一部分,從而分離出 ip 位址中的網路部分與主機部分,基於子網掩碼,管理員可以將網路進一步劃分為若干子網。它必須結合 i...