CSS之FFC/GFC

wemall 發(fā)布于2019-08-29 17:29 / 785人閱讀

摘要：全稱翻譯過來就是彈性格式化上下文。產(chǎn)生條件屬性值設置為為或者的容器布局規(guī)則的布局規(guī)則在中也有詳細定義，上可以找到詳細說明，。通常彈性布局使用，二維網(wǎng)格布局使用。最后，所有的與也是一個，在遵循自己的規(guī)范的情況下，向下兼容規(guī)范。

FFC

FFC全稱“Flex Formatting Contexts”翻譯過來就是“彈性格式化上下文”。

FFC產(chǎn)生條件

display屬性值設置為“flex”或“inline-flex”的容器。

FFC布局規(guī)則

FFC的布局規(guī)則與在CSS中有詳細定義，關于FFC是如何布局的，看阮一峰的這篇文章即可: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
在這篇文章之外額外需要注意的是：FFC布局中，float、clear、vertical-align屬性不會生效。

GFC

GFC全稱“GridLayout Formatting Contexts”翻譯過來就是“塊級格式化上下文”。

GFC產(chǎn)生條件

display屬性值設置為為“grid”或者“inline-grid”的容器

GFC布局規(guī)則

GFC的布局規(guī)則在CSS中也有詳細定義，MDN上可以找到詳細說明，https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout。
接下來看幾個例子，明白GFC的妙用

經(jīng)典頁面網(wǎng)格布局

.warp {
    height: 100%;
    display: grid;
    grid-template-columns: 200px calc(100% - 205px);
    grid-template-rows: 100px calc(100% - 170px) 60px;
    grid-gap: 5px;
}
.warp div { border: 1px solid aquamarine; }
.warp .g-1 { grid-column-start: 1; grid-column-end: 3; }
.warp .g-4 { grid-column-start: 1; grid-column-end: 3; }

當然我們通過float或者flex也是可以達到相同的效果，但代碼量和復雜程度相對于GFC來說會更多一些。

實現(xiàn)排列效果

.list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;  
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    width: 400px;
}
.list div { height: 50px; border: 1px solid grey; }

通過GFC控制排列，代碼量也非常的少，也很容易理解。

任意魔方拼接

.cube { 
    display: grid; 
    grid-gap: 2px; 
    width: 300px; height: 300px;
}
.cube div { border: 1px solid grey; }
.cube .g-1 { grid-column-start: 1; grid-column-end: 3; }
.cube .g-3 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

用GFC可以輕松實現(xiàn)自由拼接效果話，換成其他方法，一般會使用相對/絕對定位，或者flex來實現(xiàn)自由拼接效果，復雜程度將會提升好幾個等級。

最后總結

FFC能做的事情，通過GFC都能搞定，反過來GFC能做的事通過FFC也能實現(xiàn)。
通常彈性布局使用FFC，二維網(wǎng)格布局使用GFC。
最后，所有的FFC與GFC也是一個BFC，在遵循自己的規(guī)范的情況下，向下兼容BFC規(guī)范。

云服務器 GPU云服務器之字形系列之香江之無限夢之天翼

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/114356.html

CSS之BFC

摘要：比如說最常見的塊級元素內(nèi)聯(lián)元素文檔模型層疊樣式模型盒子模型等，但還有一種規(guī)范經(jīng)常會被排除在規(guī)范的認知之外。屬于同一個的兩個相鄰的會發(fā)生重疊。計算的高度時，浮動元素也參與計算。垂直方向的距離由決定，利用這一點可以解決塌陷問題。對于很多初學者來說，CSS是不講道理的，但是如果去深究，會發(fā)現(xiàn)其實CSS是有一定道理的。比如說最常見的塊級元素、內(nèi)聯(lián)元素、文檔模型、層疊樣式模型、盒子模型CSS等...

Jinkey 2019-08-29 17:27 評論0 收藏0
扯點：FC - Formatting Context

摘要：指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。兩個同胞盒間的垂直距離取決于屬性。同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。 FC（Formatting Context）指頁面中一個渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。常見的FC有BFC、IFC，GFC和FFC。 BF...

notebin 2019-08-29 14:11 評論0 收藏0
深入css布局 (1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內(nèi)元素，行內(nèi)塊級元素。行內(nèi)級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們...

ky0ncheng 2019-04-23 13:43 評論0 收藏0
深入css布局(1) — 盒模型 & 元素分類

摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來微軟也慢慢轉向了的標準，在以后支持了標準盒模型。行內(nèi)級元素屬性取的元素。深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重...

blankyao 2019-08-29 15:25 評論0 收藏0
CSS入門之引用、選擇器、屬性（六分之三）

摘要：入門教程六分之三篇沒辦法，我直播教小伙伴入門，屬性講完，準備說定位的時候，他們就喊停，不住了。。。選擇器表達式如下相關效果見表達式關鍵詞特性屬性屬性即樣式定制的具體樣式，比如定制寬高，分別為與等。 CSS 入門教程六分之三篇沒辦法，我直播教小伙伴CSS入門，屬性講完，準備說定位的時候，他們就喊停，hold不住了。。。所以先寫到六分之三，23333333 要點解釋引用如...

baishancloud 2019-08-30 15:54 評論0 收藏0