CSS之IFC

1

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; }
<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

clipboard.png
左右margin撑开,上下margin并未撑开,符合IFC规范,只计算横向样式控件,不计算纵向样式空间。

多个元素水平居中

.warp { border: 1px solid red; width: 200px; text-align: center; }
.text { background: green; }
<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

clipboard.png

水平排列规则根据IFC容器的text-align值来排列,可以用来实现多个子元素的水平居中。

float元素优先排列

.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }
<div class="warp">
    <span class="text">这是文本1</span>
    <span class="text">这是文本2</span>
    <span class="text f-l">这是文本3</span>
    <span class="text">这是文本4</span>
</div>

clipboard.png
IFC中具备float属性值的元素优先排列,在很多场景中用来在文章段落开头添加“tag”可以用到。

最后总结

利用IFC还可以做很多其他的事情,例如:解决元素垂直居中、多个文本元素行高不一致排列混乱。

你可能感兴趣的

载入中...