什麼是格式化上下文(FC)?格式化上下文(Formatting Context),指頁面中一個渲染地區,擁有一套渲染規則,它決定了其子項目如何定位,以及與其他元素的相互關係和作用,那麼css布局中格式化上下文有哪些呢?下面這篇文章給大家介紹了幾種格式化內容相關的類型。
塊級格式上下文(BFC):
什麼是BFC?Block Formatting Context,塊級格式化上下文,一個獨立的塊級渲染地區,該地區擁有一套渲染規則來約束塊級盒子的布局,且與地區外部無關。
BFC的約束規則
1、內部的BOX會在垂直方向上一個接一個的放置;
2、垂直方向上的距離由margin決定。(完整的說法是:屬於同一個BFC的倆個相鄰的BOX的margin會發生重疊,與方向無關。)
3、每個元素的左外邊距與包含塊的左邊界相接觸(從左至右),即使浮動元素也是如此。(這說明BFC中的子項目不會超出它的包含塊,而position為absolute的元素可以超出它的包含塊邊界);
4、BFC的地區不會與float的元素地區重疊;
5、計算BFC的高度時,浮動子項目也參與計算;
6、BFC就是頁面上的一個隔離的獨立容器,容器裡面的子項目不會影響到外面的元素,反之亦然;
BFC的應用
防止margin
發生重疊
防止發生因浮動導致的高度塌陷
怎麼產生 BFC
display:table也認為可以產生BFC?其實是在於Table會預設產生一個匿名的table-cell,正是這個匿名的table-cell產生了BFC。
行內格式化上下文(IFC):
什麼是IFC?IFC(Inline Formatting Contexts)直譯為"行內格式化上下文",IFC的line box(線框)高度由其包含行內元素中最高的實際高度計算而來(不受到豎直方向的 padding/margin 影響)
IFC有的特性
1、IFC中的line box一般左右都貼緊整個IFC,但是會因為float元素而擾亂。float元素會位於IFC與與line box之間,使得line box寬度縮短。
2、IIFC中時不可能有區塊層級元素的,當插入區塊層級元素時(如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
將改變傳統的配置模式,他將讓布局從一維布局變成了二維布局。簡單的說,有了GFC
之後,布局不再局限於單個維度了。這個時候你要實作類別似九宮格,拼圖之類的布局效果顯得格外的容易。
調整格式化上下文(FFC):
FFC(Flex Formatting Contexts)直譯為"調整格式化上下文",display值為flex或者inline-flex的元素將會產生自適應容器(flex container)。
Flex Box 由伸縮容器和伸縮項目組成。通過設定元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設定為 flex 的容器被渲染為一個區塊層級元素,而設定為 inline-flex 的容器則渲染為一個行內元素。
伸縮容器中的每一個子項目都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說,Flexbox 定義了伸縮容器內伸縮項目該如何布局。
調整格式化上下文(FFC)與塊級格式上下文(BFC)的區別:
FFC與BFC有點兒類似,但仍有以下幾點區別:
1、Flexbox 不支援 ::first-line 和 ::first-letter 這兩種虛擬元素
2、vertical-align 對 Flexbox 中的子項目 是沒有效果的
3、float 和 clear 屬性對 Flexbox 中的子項目是沒有效果的,也不會使子項目脫離文檔流(但是對Flexbox 是有效果的!)
4、多欄布局(column-*) 在 Flexbox 中也是失效的,就是說我們不能使用多欄布局在 Flexbox 排列其下的子項目
5、Flexbox 下的子項目不會繼承父級容器的寬