資訊專欄INFORMATION COLUMN
摘要：直譯為塊級(jí)格式化上下文。清除內(nèi)部元素浮動(dòng)，撐開(kāi)高度。解決上下邊距重疊問(wèn)題，兩個(gè)元素分別放至不同的中。元素會(huì)位于與與之間，使得寬度縮短。伸縮容器外和伸縮項(xiàng)目?jī)?nèi)的一切元素都不受影響。
原文地址：https://www.xingkongbj.com/blog/css/fc.html
FC的全稱是：Formatting Contexts，是W3C CSS2.1規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。
BFC(Block Formatting Contexts)直譯為"塊級(jí)格式化上下文"。Block Formatting Contexts就是頁(yè)面上的一個(gè)隔離的渲染區(qū)域，容器里面的子元素不會(huì)在布局上影響到外面的元素，反之也是如此。
產(chǎn)生方式：
作用：
比如常見(jiàn)的多欄布局，結(jié)合塊級(jí)別元素浮動(dòng)，里面的元素則是在一個(gè)相對(duì)隔離的環(huán)境里運(yùn)行。一般用overflow: hidden; 產(chǎn)生 BFC。
IFC(Inline Formatting Contexts)直譯為"內(nèi)聯(lián)格式化上下文"，IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來(lái)（不受到豎直方向的padding/margin影響)
IFC中的line box一般左右都貼緊整個(gè)IFC，但是會(huì)因?yàn)閒loat元素而擾亂。float元素會(huì)位于IFC與與line box之間，使得line box寬度縮短。 同個(gè)ifc下的多個(gè)line box高度會(huì)不同。 IFC中時(shí)不可能有塊級(jí)元素的，當(dāng)插入塊級(jí)元素時(shí)（如p中插入div）會(huì)產(chǎn)生兩個(gè)匿名塊與div分隔開(kāi)，即產(chǎn)生兩個(gè)IFC，每個(gè)IFC對(duì)外表現(xiàn)為塊級(jí)元素，與div垂直排列。
作用：
水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)，設(shè)置其為inline-block則會(huì)在外層產(chǎn)生IFC，通過(guò)text-align則可以使其水平居中。
垂直居中：創(chuàng)建一個(gè)IFC，用其中一個(gè)元素?fù)伍_(kāi)父元素的高度，然后設(shè)置其vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中。
GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"，當(dāng)為一個(gè)元素設(shè)置display值為grid的時(shí)候，此元素將會(huì)獲得一個(gè)獨(dú)立的渲染區(qū)域，我們可以通過(guò)在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項(xiàng)目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個(gè)網(wǎng)格項(xiàng)目（grid item）定義位置和空間。
作用：
GridLayout會(huì)有更加豐富的屬性來(lái)控制行列，控制對(duì)齊以及更為精細(xì)的渲染語(yǔ)義和控制。
FFC(Flex Formatting Contexts)直譯為"自適應(yīng)格式化上下文"，display值為flex或者inline-flex的元素將會(huì)生成自適應(yīng)容器（flex container），可惜這個(gè)牛逼的屬性只有谷歌和火狐支持，不過(guò)在移動(dòng)端也足夠了，至少safari和chrome還是OK的，畢竟這倆在移動(dòng)端才是王道。
Flex Box 由伸縮容器和伸縮項(xiàng)目組成。通過(guò)設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個(gè)伸縮容器。設(shè)置為 flex 的容器被渲染為一個(gè)塊級(jí)元素，而設(shè)置為 inline-flex 的容器則渲染為一個(gè)行內(nèi)元素。
伸縮容器中的每一個(gè)子元素都是一個(gè)伸縮項(xiàng)目。伸縮項(xiàng)目可以是任意數(shù)量的。伸縮容器外和伸縮項(xiàng)目?jī)?nèi)的一切元素都不受影響。簡(jiǎn)單地說(shuō)，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項(xiàng)目該如何布局。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/2111.html
摘要：完整的說(shuō)法是屬于同一個(gè)的倆個(gè)相鄰的的會(huì)發(fā)生重疊，與方向無(wú)關(guān)。元素會(huì)位于與與之間，使得寬度縮短。簡(jiǎn)單的說(shuō)，有了之后，布局不再局限于單個(gè)維度了。 什么是FC？ Formatting Context，格式化上下文，指頁(yè)面中一個(gè)渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級(jí)格式...
摘要：完整的說(shuō)法是屬于同一個(gè)的倆個(gè)相鄰的的會(huì)發(fā)生重疊，與方向無(wú)關(guān)。元素會(huì)位于與與之間，使得寬度縮短。簡(jiǎn)單的說(shuō)，有了之后，布局不再局限于單個(gè)維度了。 什么是FC？ Formatting Context，格式化上下文，指頁(yè)面中一個(gè)渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級(jí)格式...
摘要：指頁(yè)面中一個(gè)渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。兩個(gè)同胞盒間的垂直距離取決于屬性。同一個(gè)塊格式化上下文中的相鄰塊級(jí)盒的垂直外邊距將折疊。 FC（Formatting Context）指頁(yè)面中一個(gè)渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。常見(jiàn)的FC有BFC、IFC，GFC和FFC。 BF...
? 深入css布局(3) — margin問(wèn)題與格式化上下文 ? ???? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。 ? css布局篇已經(jīng)講個(gè)2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動(dòng)等知識(shí)點(diǎn)。今天呢，我們把css布局篇做一個(gè)結(jié)尾，最后...
閱讀 2084·2023-04-25 17:57
閱讀 1290·2021-11-24 09:39
閱讀 2488·2019-08-29 16:39
閱讀 3317·2019-08-29 13:44
閱讀 3135·2019-08-29 13:14
閱讀 2324·2019-08-26 11:36
閱讀 3819·2019-08-26 11:00
閱讀 953·2019-08-26 10:14
