標籤: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中的格式化上下文