css佈局的各種FC簡單介紹:BFC,IFC,GFC,FFC

css佈局的各種FC簡單介紹:BFC,IFC,GFC,FFC
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

什麼是FC?

Formatting Context,格式化上下文,指頁面中一個渲染區域,擁有一套渲染規則,它決定了其子元素如何定位,以及與其他元素的相互關係和作用。

BFC

什麼是BFC

Block Formatting Context,塊級格式化上下文,一個獨立的塊級渲染區域,該區域擁有一套渲染規則來約束塊級盒子的佈局,且與區域外部無關。

BFC的約束規則

  1. 內部的BOX會在垂直方向上一個接一個的放置;
  2. 垂直方向上的距離由margin決定。(完整的說法是:屬於同一個BFC的倆個相鄰的BOXmargin會發生重疊,與方向無關。
  3. 每個元素的左外邊距與包含塊的左邊界相接觸(從左到右),即使浮動元素也是如此。(這說明BFC中的子元素不會超出它的包含塊,而positionabsolute的元素可以超出它的包含塊邊界);
  4. BFC的區域不會與float的元素區域重疊;
  5. 計算BFC的高度時,浮動子元素也參與計算;
  6. BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素,反之亦然;

BFC的應用

  • 防止margin發生重疊
  • 防止發生因浮動導致的高度塌陷

怎麼生成BFC

  • float的值不為none
  • overflow的值不為visible
  • display的值為inline-block table-cell table-caption
  • position的值為absolutefixed

display:table也認為可以生成BFC?其實是在於Table會預設生成一個匿名的table-cell,正是這個匿名的table-cell生成了BFC

IFC

什麼是IFC

IFC(Inline Formatting Contexts)直譯為”行內格式化上下文”,IFCline box(線框)高度由其包含行內元素中最高的實際高度計算而來(不受到豎直方向的 padding/margin 影響)

IFC有的特性

  1. IFC中的line box一般左右都貼緊整個IFC,但是會因為float元素而擾亂。float元素會位於IFC與與line box之間,使得line box寬度縮短。
  2. IFC中時不可能有塊級元素的,當插入塊級元素時(如p中插入div)會產生兩個匿名塊與div分隔開,即產生兩個IFC,每個IFC對外表現為塊級元素,與div垂直排列。

IFC的應用

  1. 水平居中:當一個塊要在環境中水平居中時,設定其為inline-block則會在外層產生IFC,通過text-align則可以使其水平居中。
  2. 垂直居中:建立一個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 屬性為 flexinline-flex 可以得到一個伸縮容器。設定為 flex 的容器被渲染為一個塊級元素,而設定為 inline-flex 的容器則渲染為一個行內元素。

伸縮容器中的每一個子元素都是一個伸縮專案。伸縮專案可以是任意數量的。伸縮容器外和伸縮專案內的一切元素都不受影響。簡單地說,Flexbox 定義了伸縮容器內伸縮專案該如何佈局。

FFC與BFC的區別

FFCBFC有點兒類似,但仍有以下幾點區別:

  • Flexbox 不支援 ::first-line::first-letter 這兩種偽元素
  • vertical-alignFlexbox 中的子元素 是沒有效果的
  • floatclear 屬性對 Flexbox 中的子元素是沒有效果的,也不會使子元素脫離文件流(但是對Flexbox 是有效果的!)
  • 多欄佈局(column-*) 在 Flexbox 中也是失效的,就是說我們不能使用多欄佈局在 Flexbox 排列其下的子元素
  • Flexbox 下的子元素不會繼承父級容器的寬

相關文章

前端開發 最新文章