CSS之IFC

lufficc 发布于2019-08-29 17:29 / 1750人阅读

摘要：行框的宽度是由包含块和与其中的浮动来决定。中的高度由行高计算规则来确定，同个下的多个高度可能会不同。当一个超过父元素的宽度时，它会被分割成多个，这些分布在多个中。如果子元素未设置强制换行的情况下，将不可被分割，将会溢出父元素。

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还可以做很多其他的事情，例如：解决元素垂直居中、多个文本元素行高不一致排列混乱。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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