成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

BFC、IFC、GFC、FFC

gghyoo / 1647人閱讀

摘要：直譯為塊級格式化上下文。清除內(nèi)部元素浮動，撐開高度。解決上下邊距重疊問題，兩個元素分別放至不同的中。元素會位于與與之間，使得寬度縮短。伸縮容器外和伸縮項目內(nèi)的一切元素都不受影響。

原文地址：https://www.xingkongbj.com/blog/css/fc.html

FC

FC的全稱是：Formatting Contexts，是W3C CSS2.1規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。

BFC

BFC(Block Formatting Contexts)直譯為"塊級格式化上下文"。Block Formatting Contexts就是頁面上的一個隔離的渲染區(qū)域，容器里面的子元素不會在布局上影響到外面的元素，反之也是如此。

產(chǎn)生方式：

  • float的值不為none。
  • overflow的值不為visible。
  • position的值不為relative和static。
  • display的值為table-cell, table-caption, inline-block，inline-flex中的任何一個。

作用：

比如常見的多欄布局，結(jié)合塊級別元素浮動，里面的元素則是在一個相對隔離的環(huán)境里運行。一般用overflow: hidden; 產(chǎn)生 BFC。

  • 清除內(nèi)部元素浮動，撐開高度。
  • 解決上下邊距重疊問題，兩個元素分別放至不同的 BFC 中。
  • 解決與 float 元素重疊問題。

IFC

IFC(Inline Formatting Contexts)直譯為"內(nèi)聯(lián)格式化上下文"，IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)

IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂。float元素會位于IFC與與line box之間，使得line box寬度縮短。 同個ifc下的多個line box高度會不同。 IFC中時不可能有塊級元素的，當(dāng)插入塊級元素時（如p中插入div）會產(chǎn)生兩個匿名塊與div分隔開，即產(chǎn)生兩個IFC，每個IFC對外表現(xiàn)為塊級元素，與div垂直排列。

作用：

水平居中：當(dāng)一個塊要在環(huán)境中水平居中時，設(shè)置其為inline-block則會在外層產(chǎn)生IFC，通過text-align則可以使其水平居中。

垂直居中：創(chuàng)建一個IFC，用其中一個元素?fù)伍_父元素的高度，然后設(shè)置其vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中。

GFC

GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"，當(dāng)為一個元素設(shè)置display值為grid的時候，此元素將會獲得一個獨立的渲染區(qū)域，我們可以通過在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個網(wǎng)格項目（grid item）定義位置和空間。

作用：

GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細(xì)的渲染語義和控制。

FFC

FFC(Flex Formatting Contexts)直譯為"自適應(yīng)格式化上下文"，display值為flex或者inline-flex的元素將會生成自適應(yīng)容器（flex container），可惜這個牛逼的屬性只有谷歌和火狐支持，不過在移動端也足夠了，至少safari和chrome還是OK的，畢竟這倆在移動端才是王道。

Flex Box 由伸縮容器和伸縮項目組成。通過設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設(shè)置為 flex 的容器被渲染為一個塊級元素，而設(shè)置為 inline-flex 的容器則渲染為一個行內(nèi)元素。

伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數(shù)量的。伸縮容器外和伸縮項目內(nèi)的一切元素都不受影響。簡單地說，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項目該如何布局。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2111.html

相關(guān)文章

  • css布局的各種FC簡單介紹：BFC，IFC，GFC，FFC

    摘要：完整的說法是屬于同一個的倆個相鄰的的會發(fā)生重疊，與方向無關(guān)。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...

    mindwind 評論0 收藏0

  • css布局的各種FC簡單介紹：BFC，IFC，GFC，FFC

    摘要：完整的說法是屬于同一個的倆個相鄰的的會發(fā)生重疊，與方向無關(guān)。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...

    付永剛 評論0 收藏0

  • 扯點：FC - Formatting Context

    摘要：指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。兩個同胞盒間的垂直距離取決于屬性。同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。 FC（Formatting Context）指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。常見的FC有BFC、IFC，GFC和FFC。 BF...

    notebin 評論0 收藏0

  • 深入css布局 (3)完結(jié) — margin問題與格式化上下文

    ? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點。今天我們來深入學(xué)習(xí)一下css布局相關(guān)的知識。 ? css布局篇已經(jīng)講個2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動等知識點。今天呢，我們把css布局篇做一個結(jié)尾，最后...

    blankyao 評論0 收藏0

發(fā)表評論

0條評論

gghyoo

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<