說說css中的格式化上下文

來源:互聯網
上載者:User

標籤:logs   font   條件   init   mat   blocks   hidden   grid   水平置中   

一、什麼是FC?
FC,Formatting Contexts,是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染地區,並且有一套渲染規則,它決定了子項目將如何定位,以及和其他元素的關係和相互作用。
二、BFC
BFC,Block Formatting Contexts,塊級格式化上下文。BFC是頁面上的一個隔離的渲染地區,容器裡面的子項目不會在布局上影響到外面的元素,反之也是如此。
1、觸發BFC的條件

A、浮動元素,float除none以外的值;B、絕對位置元素,position值為二者absolute,fixed之一;C、display值為三者inline-blocks,table-cells,table-captions之一;D、overflow值為三者hidden,auto,scroll之一。 

2、BFC的特性

A、BFC可以阻止外邊距摺疊;B、BFC可以包含浮動的元素;C、BFC可以阻止元素被浮動元素覆蓋;D、BFC儘可能讓元素不在一行,內部元素都是區塊層級元素,包含div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p。

3、BFC的用途
比如常見的多欄布局,結合塊層級元素浮動,內部元素不受外部環境影響。
三、IFC
IFC,Inline Formatting Contexts,內聯格式化上下文。IFC的line box高度由行內子項目中最大的實際高度確定,不受豎直方向的padding/margin影響。IFC中不可能有區塊層級元素,如果插入了區塊層級元素(如p中插入div)會產生兩個匿名塊與div分隔開,即產生兩個IFC,每個IFC對外表現為區塊層級元素,與div垂直排列。
1、觸發IFC的條件

A、display值為inline-blocks,inline;B、設定font-size;C、設定line-height,行高是指上下文本行的基準間的垂直距離;D、設定height;E、設定vertical-aligin。

2、IFC的特性
讓元素儘可能在同一行,內部元素都是內嵌元素,包含a b span I b em img input select strong。
3、IFC的用途
比如水平置中,設定text-align:center,垂直置中設定其vertical-align:middle。

三、FFC
FFC,Flex Formatting Contexts,調整格式化上下文,display值為flex或者inline-flex的元素將會產生自適應容器(flex container)。
1、觸發FFC的條件
display值為flex。
2、FFC的特性
聲明了一個Auto Scaling盒子。
3、FFC的用途
響應式布局。

四、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會有更加豐富的屬性來控制行列,控制對齊以及更為精細的渲染語義和控制。

CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。

說說css中的格式化上下文

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.