国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css布局的各種FC簡(jiǎn)單介紹：BFC，IFC，GFC，F(xiàn)FC

付永剛 / 3606人閱讀

摘要：完整的說法是屬于同一個(gè)的倆個(gè)相鄰的的會(huì)發(fā)生重疊，與方向無(wú)關(guān)。元素會(huì)位于與與之間，使得寬度縮短。簡(jiǎn)單的說，有了之后，布局不再局限于單個(gè)維度了。

什么是FC？

Formatting Context，格式化上下文，指頁(yè)面中一個(gè)渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。

BFC 什么是BFC

Block Formatting Context，塊級(jí)格式化上下文，一個(gè)獨(dú)立的塊級(jí)渲染區(qū)域，該區(qū)域擁有一套渲染規(guī)則來(lái)約束塊級(jí)盒子的布局，且與區(qū)域外部無(wú)關(guān)。

BFC的約束規(guī)則

內(nèi)部的BOX會(huì)在垂直方向上一個(gè)接一個(gè)的放置；

垂直方向上的距離由margin決定。（完整的說法是：屬于同一個(gè)BFC的倆個(gè)相鄰的BOX的margin會(huì)發(fā)生重疊，與方向無(wú)關(guān)。）

每個(gè)元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動(dòng)元素也是如此。（這說明BFC中的子元素不會(huì)超出它的包含塊，而position為absolute的元素可以超出它的包含塊邊界）；

BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊；

計(jì)算BFC的高度時(shí)，浮動(dòng)子元素也參與計(jì)算；

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然；

BFC的應(yīng)用

防止margin發(fā)生重疊

防止發(fā)生因浮動(dòng)導(dǎo)致的高度塌陷

怎么生成 BFC

float的值不為none；

overflow的值不為visible；

display的值為inline-block table-cell table-caption；

position的值為absolute或fixed；

display：table也認(rèn)為可以生成BFC？其實(shí)是在于Table會(huì)默認(rèn)生成一個(gè)匿名的table-cell，正是這個(gè)匿名的table-cell生成了BFC。
IFC 什么是IFC

IFC(Inline Formatting Contexts)直譯為"行內(nèi)格式化上下文"，IFC的line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來(lái)（不受到豎直方向的 padding/margin 影響)

IFC有的特性

IFC中的line box一般左右都貼緊整個(gè)IFC，但是會(huì)因?yàn)?b>float元素而擾亂。float元素會(huì)位于IFC與與line box之間，使得line box寬度縮短。

IFC中時(shí)不可能有塊級(jí)元素的，當(dāng)插入塊級(jí)元素時(shí)（如p中插入div）會(huì)產(chǎn)生兩個(gè)匿名塊與div分隔開，即產(chǎn)生兩個(gè)IFC，每個(gè)IFC對(duì)外表現(xiàn)為塊級(jí)元素，與div垂直排列。

IFC的應(yīng)用

水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)，設(shè)置其為inline-block則會(huì)在外層產(chǎn)生IFC，通過text-align則可以使其水平居中。

垂直居中：創(chuàng)建一個(gè)IFC，用其中一個(gè)元素?fù)伍_父元素的高度，然后設(shè)置其vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中。

GFC

GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"，當(dāng)為一個(gè)元素設(shè)置display值為grid的時(shí)候，此元素將會(huì)獲得一個(gè)獨(dú)立的渲染區(qū)域，我們可以通過在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項(xiàng)目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個(gè)網(wǎng)格項(xiàng)目（grid item）定義位置和空間。

GFC將改變傳統(tǒng)的布局模式，他將讓布局從一維布局變成了二維布局。簡(jiǎn)單的說，有了GFC之后，布局不再局限于單個(gè)維度了。這個(gè)時(shí)候你要實(shí)現(xiàn)類似九宮格，拼圖之類的布局效果顯得格外的容易。

FFC

FFC(Flex Formatting Contexts)直譯為"自適應(yīng)格式化上下文"，display值為flex或者inline-flex的元素將會(huì)生成自適應(yīng)容器（flex container）。

Flex Box 由伸縮容器和伸縮項(xiàng)目組成。通過設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個(gè)伸縮容器。設(shè)置為 flex 的容器被渲染為一個(gè)塊級(jí)元素，而設(shè)置為 inline-flex 的容器則渲染為一個(gè)行內(nèi)元素。

伸縮容器中的每一個(gè)子元素都是一個(gè)伸縮項(xiàng)目。伸縮項(xiàng)目可以是任意數(shù)量的。伸縮容器外和伸縮項(xiàng)目?jī)?nèi)的一切元素都不受影響。簡(jiǎn)單地說，Flexbox 定義了伸縮容器內(nèi)伸縮項(xiàng)目該如何布局。

FFC與BFC的區(qū)別

FFC與BFC有點(diǎn)兒類似，但仍有以下幾點(diǎn)區(qū)別：

Flexbox 不支持 ::first-line 和 ::first-letter 這兩種偽元素

vertical-align 對(duì) Flexbox 中的子元素 是沒有效果的

float 和 clear 屬性對(duì) Flexbox 中的子元素是沒有效果的，也不會(huì)使子元素脫離文檔流(但是對(duì)Flexbox 是有效果的！)

多欄布局（column-*） 在 Flexbox 中也是失效的，就是說我們不能使用多欄布局在 Flexbox 排列其下的子元素

Flexbox 下的子元素不會(huì)繼承父級(jí)容器的寬

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52364.html

相關(guān)文章

  • css布局的各種FC簡(jiǎn)單介紹：BFC，IFC，GFC，F(xiàn)FC

    摘要：完整的說法是屬于同一個(gè)的倆個(gè)相鄰的的會(huì)發(fā)生重疊，與方向無(wú)關(guān)。元素會(huì)位于與與之間，使得寬度縮短。簡(jiǎn)單的說，有了之后，布局不再局限于單個(gè)維度了。 什么是FC？ Formatting Context，格式化上下文，指頁(yè)面中一個(gè)渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級(jí)格式...

    mindwind 評(píng)論0 收藏0

  • BFC、IFC、GFC、FFC

    摘要：直譯為塊級(jí)格式化上下文。清除內(nèi)部元素浮動(dòng)，撐開高度。解決上下邊距重疊問題，兩個(gè)元素分別放至不同的中。元素會(huì)位于與與之間，使得寬度縮短。伸縮容器外和伸縮項(xiàng)目?jī)?nèi)的一切元素都不受影響。原文地址：https://www.xingkongbj.com/blog/css/fc.html FC FC的全稱是：Formatting Contexts，是W3C CSS2.1規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲...

    gghyoo 評(píng)論0 收藏0

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實(shí)質(zhì)上是各種的組合。相反，一些塊容器盒，比如非替換行內(nèi)塊及非替換表格單元格，不是塊級(jí)盒。描述元素跟它的后代之間的影響。行盒行盒由行內(nèi)格式化上下文產(chǎn)生的盒，用于表示一行。彈性容器外和彈性項(xiàng)目?jī)?nèi)的一切元素都不受影響。 CSS中各種布局的背后，實(shí)質(zhì)上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評(píng)論0 收藏0

  • CSS之BFC

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

    Jinkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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