成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS之FFC/GFC

wemall / 704人閱讀

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

FFC

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

FFC產(chǎn)生條件

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

FFC布局規(guī)則

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

GFC

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

GFC產(chǎn)生條件

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

GFC布局規(guī)則

GFC的布局規(guī)則在CSS中也有詳細(xì)定義，MDN上可以找到詳細(xì)說明，https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout。
接下來看幾個(gè)例子，明白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; }


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

實(shí)現(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可以輕松實(shí)現(xiàn)自由拼接效果話，換成其他方法，一般會(huì)使用相對/絕對定位，或者flex來實(shí)現(xiàn)自由拼接效果，復(fù)雜程度將會(huì)提升好幾個(gè)等級。

最后總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114356.html

相關(guān)文章

  • CSS之BFC

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

    Jinkey 評論0 收藏0

  • 扯點(diǎn)：FC - Formatting Context

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

    notebin 評論0 收藏0

  • 深入css布局 (1) — 盒模型 & 元素分類

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

    ky0ncheng 評論0 收藏0

  • 深入css布局(1) — 盒模型 & 元素分類

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

    blankyao 評論0 收藏0

  • CSS入門之引用、選擇器、屬性（六分之三）

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

    baishancloud 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<