亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS之IFC

lufficc / 1874人閱讀

摘要：行框的寬度是由包含塊和與其中的浮動(dòng)來決定。中的高度由行高計(jì)算規(guī)則來確定，同個(gè)下的多個(gè)高度可能會(huì)不同。當(dāng)一個(gè)超過父元素的寬度時(shí)，它會(huì)被分割成多個(gè)，這些分布在多個(gè)中。如果子元素未設(shè)置強(qiáng)制換行的情況下，將不可被分割，將會(huì)溢出父元素。

IFC

Inline Formatting Contexts，也就是“內(nèi)聯(lián)格式化上下文”。

符合以下任一條件即會(huì)生成一個(gè)IFC

塊級(jí)元素中僅包含內(nèi)聯(lián)級(jí)別元素

形成條件非常簡(jiǎn)單，需要注意的是當(dāng)IFC中有塊級(jí)元素插入時(shí)，會(huì)產(chǎn)生兩個(gè)匿名塊將父元素分割開來，產(chǎn)生兩個(gè)IFC，這里不做過多介紹。

IFC布局規(guī)則

子元素水平方向橫向排列，并且垂直方向起點(diǎn)為元素頂部。

子元素只會(huì)計(jì)算橫向樣式空間，【padding、border、margin】，垂直方向樣式空間不會(huì)被計(jì)算，【padding、border、margin】。

在垂直方向上，子元素會(huì)以不同形式來對(duì)齊（vertical-align）

能把在一行上的框都完全包含進(jìn)去的一個(gè)矩形區(qū)域，被稱為該行的行框（line box）。行框的寬度是由包含塊（containing box）和與其中的浮動(dòng)來決定。

IFC中的“l(fā)ine box”一般左右邊貼緊其包含塊，但float元素會(huì)優(yōu)先排列。

IFC中的“l(fā)ine box”高度由 CSS 行高計(jì)算規(guī)則來確定，同個(gè)IFC下的多個(gè)line box高度可能會(huì)不同。

當(dāng) inline-level boxes的總寬度少于包含它們的line box時(shí)，其水平渲染規(guī)則由 text-align 屬性值來決定。

當(dāng)一個(gè)“inline box”超過父元素的寬度時(shí)，它會(huì)被分割成多個(gè)boxes，這些 oxes 分布在多個(gè)“l(fā)ine box”中。如果子元素未設(shè)置強(qiáng)制換行的情況下，“inline box”將不可被分割，將會(huì)溢出父元素。

相比較于BFC，IFC的規(guī)則噼里啪啦一大堆，很少有人會(huì)耐心看下去，舉幾個(gè)例子，花幾分鐘就可以大概明白其特性。

很多時(shí)候，上下間距不生效可以使用IFC來解釋 
.warp { border: 1px solid red; display: inline-block; }
.text { margin: 20px; background: green; }

    文本一
    文本二


左右margin撐開，上下margin并未撐開，符合IFC規(guī)范，只計(jì)算橫向樣式控件，不計(jì)算縱向樣式空間。

多個(gè)元素水平居中 
.warp { border: 1px solid red; width: 200px; text-align: center; }
.text { background: green; }

    文本一
    文本二

水平排列規(guī)則根據(jù)IFC容器的text-align值來排列，可以用來實(shí)現(xiàn)多個(gè)子元素的水平居中。

float元素優(yōu)先排列 
.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }

    這是文本1
    這是文本2
    這是文本3
    這是文本4


IFC中具備float屬性值的元素優(yōu)先排列，在很多場(chǎng)景中用來在文章段落開頭添加“tag”可以用到。

最后總結(jié)

利用IFC還可以做很多其他的事情，例如：解決元素垂直居中、多個(gè)文本元素行高不一致排列混亂。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114357.html

相關(guān)文章

  • 【Hello CSS】第六章-文檔流與排版

    摘要：作者陳大魚頭正常流什么是正常流其實(shí)就是我們?nèi)粘Ｋf的文檔流。在官方文檔里對(duì)應(yīng)的是。然后，包含形成一條線的框的矩形區(qū)域稱為線盒?；€線盒的高度由的計(jì)算結(jié)果決定。級(jí)層疊上下文被自動(dòng)視為父級(jí)層疊上下文的一個(gè)獨(dú)立單元。自由分配，由具體情況決定。 作者：陳大魚頭 github： KRISACHAN 正常流 什么是正常流？其實(shí)就是我們?nèi)粘Ｋf的文檔流。在W3C官方文檔里對(duì)應(yīng)的是normal ...

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

  • 【Hello CSS】第六章-文檔流與排版

    摘要：作者陳大魚頭正常流什么是正常流其實(shí)就是我們?nèi)粘Ｋf的文檔流。在官方文檔里對(duì)應(yīng)的是。然后，包含形成一條線的框的矩形區(qū)域稱為線盒?；€線盒的高度由的計(jì)算結(jié)果決定。級(jí)層疊上下文被自動(dòng)視為父級(jí)層疊上下文的一個(gè)獨(dú)立單元。自由分配，由具體情況決定。 作者：陳大魚頭 github： KRISACHAN 正常流 什么是正常流？其實(shí)就是我們?nèi)粘Ｋf的文檔流。在W3C官方文檔里對(duì)應(yīng)的是normal ...

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

  • BFC與IFC

    摘要：行內(nèi)級(jí)元素與行內(nèi)元素行內(nèi)級(jí)元素行內(nèi)級(jí)元素是那些不會(huì)為自身內(nèi)容形成新的塊，而讓內(nèi)容分布在多行中的元素。行內(nèi)元素行內(nèi)元素僅僅是屬性值為的元素。置換和非置換元素置換元素瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容。 參考鏈接: https://segmentfault.com/a/11...https://juejin.im/post/59b73d...面試之CSS篇 - 邊距重疊與...

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

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

    摘要：完整的說法是屬于同一個(gè)的倆個(gè)相鄰的的會(huì)發(fā)生重疊，與方向無關(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

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

0條評(píng)論

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