2021前端學習筆記-第一章第一節-html-BFC、IFC、GFC、FFC
BFC、IFC、GFC、FFC
CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。
到底什麼是BFC、IFC、GFC和FFC
What's FC?
一定不是KFC,FC的全稱是:Formatting Contexts,是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域,並且有一套渲染規則,它決定了其子元素將如何定位,以及和其他元素的關係和相互作用。
BFC
BFC(Block Formatting Contexts)直譯為"塊級格式化上下文"。Block Formatting Contexts就是頁面上的一個隔離的渲染區域,容器裡面的子元素不會在佈局上影響到外面的元素,反之也是如此。如何產生BFC? float的值不為none。 overflow的值不為visible。 position的值不為relative和static。 display的值為table-cell, table-caption, inline-block中的任何一個。 那BFC一般有什麼用呢?比如常見的多欄佈局,結合塊級別元素浮動,裡面的元素則是在一個相對隔離的環境裡執行。
IFC
IFC(Inline Formatting Contexts)直譯為"內聯格式化上下文",IFC的line box(線框)高度由其包含行內元素中最高的實際高度計算而來(不受到豎直方向的padding/margin影響) IFC中的line box一般左右都貼緊整個IFC,但是會因為float元素而擾亂。float元素會位於IFC與與line box之間,使得line box寬度縮短。 同個ifc下的多個line box高度會不同。 IFC中時不可能有塊級元素的,當插入塊級元素時(如p中插入div)會產生兩個匿名塊與div分隔開,即產生兩個IFC,每個IFC對外表現為塊級元素,與div垂直排列。 那麼IFC一般有什麼用呢? 水平居中:當一個塊要在環境中水平居中時,設定其為inline-block則會在外層產生IFC,通過text-align則可以使其水平居中。 垂直居中:建立一個IFC,用其中一個元素撐開父元素的高度,然後設定其vertical-align:middle,其他行內元素則可以在此父元素下垂直居中。
GFC
GFC(GridLayout Formatting Contexts)直譯為"網格佈局格式化上下文",當為一個元素設定display值為grid的時候,此元素將會獲得一個獨立的渲染區域,我們可以通過在網格容器(grid container)上定義網格定義行(grid definition rows)和網格定義列(grid definition columns)屬性各在網格專案(grid item)上定義網格行(grid row)和網格列(grid columns)為每一個網格專案(grid item)定義位置和空間。 那麼GFC有什麼用呢,和table又有什麼區別呢?首先同樣是一個二維的表格,但GridLayout會有更加豐富的屬性來控制行列,控制對齊以及更為精細的渲染語義和控制。
FFC
FFC(Flex Formatting Contexts)直譯為"自適應格式化上下文",display值為flex或者inline-flex的元素將會生成自適應容器(flex container),可惜這個牛逼的屬性只有谷歌和火狐支援,不過在移動端也足夠了,至少safari和chrome還是OK的,畢竟這倆在移動端才是王道。 Flex Box 由伸縮容器和伸縮專案組成。通過設定元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設定為 flex 的容器被渲染為一個塊級元素,而設定為 inline-flex 的容器則渲染為一個行內元素。 伸縮容器中的每一個子元素都是一個伸縮專案。伸縮專案可以是任意數量的。伸縮容器外和伸縮專案內的一切元素都不受影響。簡單地說,Flexbox 定義了伸縮容器內伸縮專案該如何佈局。
相關文章
- 詳解BFC、IFC、GFC、FFC
- 前端人員不要只知道KFC,你應該瞭解 BFC、IFC、GFC 和 FFC前端
- 2021前端學習筆記-第一章第二節-div水平垂直居中的方法前端筆記
- 2021前端學習筆記-第一章第四節-內聯覆蓋元素寬度前端筆記
- 2021前端學習筆記-第一章第三節-opacity_visibility_display優劣前端筆記
- GIT學習筆記——第一章Git筆記
- 具體數學學習筆記——第一章筆記
- Python第一節學習筆記Python筆記
- Java基礎學習筆記 第一章Java筆記
- Win32學習筆記 第一章 (轉)Win32筆記
- 第一章 遞迴問題 學習筆記遞迴筆記
- Java_EE企業級開發學習筆記——spring學習筆記第一章Java筆記Spring
- java 程式設計思想的學習筆記 - 第一章Java程式設計筆記
- Win32學習筆記 第一章 開始 (轉)Win32筆記
- 前端學習筆記前端筆記
- 學習筆記-《基於Oracle的SQL優化》-第一章-1筆記OracleSQL優化
- SA299學習筆記 第一章 描述介面配置(1)筆記
- SA299學習筆記 第一章 描述介面配置(2)筆記
- SA299學習筆記 第一章 描述介面配置(3)筆記
- SA299學習筆記 第一章 描述介面配置(4)筆記
- 學習筆記【MySQL基礎操作-第一節:MySQL基本操作】筆記MySql
- 學習BFC與IFC
- 第一章(backup and recovery 筆記)筆記
- 機器學習 第一章學習機器學習
- MySQL資料庫初級學習筆記---第一章-資料庫概述MySql資料庫筆記
- 《Oracle DBA工作筆記》第一章Oracle筆記
- PMBOK筆記-第一章 緒論筆記
- 前端學習筆記 - nuxt.js前端筆記UXJS
- 《深度學習入門:》學習基本第一章深度學習
- 學習筆記之JAVA圖形設計卷I AWT——第一章緒論 (轉)筆記Java
- node學習筆記第八節:模組化筆記
- JVM學習筆記——節碼執行引擎JVM筆記
- 前端學習筆記之ES6~~~前端筆記
- Flutter 學習筆記① 第一個 Flutter AppFlutter筆記APP
- 學習筆記-JAVA第一天筆記Java
- hadoop學習筆記——第一個程式Hadoop筆記
- JavaWeb學習筆記——第一天JavaWeb筆記
- 第一章 Actionscript學習基本知識筆記及flashdevelop軟體的安裝問題筆記dev