資訊專欄INFORMATION COLUMN
摘要：行框的寬度是由包含塊和與其中的浮動來決定。中的高度由行高計算規(guī)則來確定，同個下的多個高度可能會不同。當(dāng)一個超過父元素的寬度時，它會被分割成多個，這些分布在多個中。如果子元素未設(shè)置強制換行的情況下，將不可被分割，將會溢出父元素。
IFC
Inline Formatting Contexts，也就是“內(nèi)聯(lián)格式化上下文”。
符合以下任一條件即會生成一個IFC塊級元素中僅包含內(nèi)聯(lián)級別元素
形成條件非常簡單，需要注意的是當(dāng)IFC中有塊級元素插入時，會產(chǎn)生兩個匿名塊將父元素分割開來，產(chǎn)生兩個IFC，這里不做過多介紹。
IFC布局規(guī)則子元素水平方向橫向排列，并且垂直方向起點為元素頂部。
子元素只會計算橫向樣式空間，【padding、border、margin】，垂直方向樣式空間不會被計算，【padding、border、margin】。
在垂直方向上，子元素會以不同形式來對齊（vertical-align）
能把在一行上的框都完全包含進(jìn)去的一個矩形區(qū)域，被稱為該行的行框（line box）。行框的寬度是由包含塊（containing box）和與其中的浮動來決定。
IFC中的“l(fā)ine box”一般左右邊貼緊其包含塊，但float元素會優(yōu)先排列。
IFC中的“l(fā)ine box”高度由 CSS 行高計算規(guī)則來確定，同個IFC下的多個line box高度可能會不同。
當(dāng) inline-level boxes的總寬度少于包含它們的line box時，其水平渲染規(guī)則由 text-align 屬性值來決定。
當(dāng)一個“inline box”超過父元素的寬度時，它會被分割成多個boxes，這些 oxes 分布在多個“l(fā)ine box”中。如果子元素未設(shè)置強制換行的情況下，“inline box”將不可被分割，將會溢出父元素。
相比較于BFC，IFC的規(guī)則噼里啪啦一大堆，很少有人會耐心看下去，舉幾個例子，花幾分鐘就可以大概明白其特性。
很多時候，上下間距不生效可以使用IFC來解釋.warp { border: 1px solid red; display: inline-block; }
.text { margin: 20px; background: green; }
文本一 文本二
左右margin撐開，上下margin并未撐開，符合IFC規(guī)范，只計算橫向樣式控件，不計算縱向樣式空間。
.warp { border: 1px solid red; width: 200px; text-align: center; }
.text { background: green; }
文本一 文本二
水平排列規(guī)則根據(jù)IFC容器的text-align值來排列，可以用來實現(xiàn)多個子元素的水平居中。
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)先排列，在很多場景中用來在文章段落開頭添加“tag”可以用到。
利用IFC還可以做很多其他的事情，例如：解決元素垂直居中、多個文本元素行高不一致排列混亂。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114357.html
摘要：作者陳大魚頭正常流什么是正常流其實就是我們?nèi)粘Ｋf的文檔流。在官方文檔里對應(yīng)的是。然后，包含形成一條線的框的矩形區(qū)域稱為線盒。基線線盒的高度由的計算結(jié)果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。 作者：陳大魚頭 github： KRISACHAN 正常流 什么是正常流？其實就是我們?nèi)粘Ｋf的文檔流。在W3C官方文檔里對應(yīng)的是normal ...
摘要：作者陳大魚頭正常流什么是正常流其實就是我們?nèi)粘Ｋf的文檔流。在官方文檔里對應(yīng)的是。然后，包含形成一條線的框的矩形區(qū)域稱為線盒。基線線盒的高度由的計算結(jié)果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。 作者：陳大魚頭 github： KRISACHAN 正常流 什么是正常流？其實就是我們?nèi)粘Ｋf的文檔流。在W3C官方文檔里對應(yīng)的是normal ...
摘要：完整的說法是屬于同一個的倆個相鄰的的會發(fā)生重疊，與方向無關(guān)。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...
閱讀 3069·2021-11-24 11:14
閱讀 3478·2021-11-22 15:22
閱讀 3200·2021-09-27 13:36
閱讀 711·2021-08-31 14:29
閱讀 1328·2019-08-30 15:55
閱讀 1752·2019-08-29 17:29
閱讀 1143·2019-08-29 16:24
閱讀 2400·2019-08-26 13:48
