CSS之IFC

lufficc 發布于2019-08-29 17:29 / 1764人閱讀

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

IFC

Inline Formatting Contexts，也就是“內聯格式化上下文”。

符合以下任一條件即會生成一個IFC

塊級元素中僅包含內聯級別元素

形成條件非常簡單，需要注意的是當IFC中有塊級元素插入時，會產生兩個匿名塊將父元素分割開來，產生兩個IFC，這里不做過多介紹。

IFC布局規則

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

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

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

能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框（line box）。行框的寬度是由包含塊（containing box）和與其中的浮動來決定。

IFC中的“line box”一般左右邊貼緊其包含塊，但float元素會優先排列。

IFC中的“line box”高度由 CSS 行高計算規則來確定，同個IFC下的多個line box高度可能會不同。

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

當一個“inline box”超過父元素的寬度時，它會被分割成多個boxes，這些 oxes 分布在多個“line box”中。如果子元素未設置強制換行的情況下，“inline box”將不可被分割，將會溢出父元素。

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

很多時候，上下間距不生效可以使用IFC來解釋

.warp { border: 1px solid red; display: inline-block; }
.text { margin: 20px; background: green; }


    文本一
    文本二

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

多個元素水平居中

.warp { border: 1px solid red; width: 200px; text-align: center; }
.text { background: green; }


    文本一
    文本二

水平排列規則根據IFC容器的text-align值來排列，可以用來實現多個子元素的水平居中。

float元素優先排列

.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }


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

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

最后總結

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

GPU云服務器云服務器 IFC 之字形系列之香江之無限

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114357.html

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

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。作者：陳大魚頭 github： KRISACHAN 正常流什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...

nihao 2019-08-02 15:35 評論0 收藏0
【Hello CSS】第六章-文檔流與排版

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。作者：陳大魚頭 github： KRISACHAN 正常流什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...

null1145 2019-08-30 11:27 評論0 收藏0
BFC與IFC

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

wpw 2019-08-29 18:33 評論0 收藏0
css布局的各種FC簡單介紹：BFC，IFC，GFC，FFC

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

mindwind 2019-08-29 15:24 評論0 收藏0