常用布局之IFC布局

问白

已于 2023-07-04 18:35:33 修改

阅读量4.5k

点赞数 2

分类专栏： javaScript 文章标签：常用布局之IFC IFC布局行内替换元素

于 2018-02-24 20:34:37 首次发布

本文链接：https://blog.csdn.net/weixin_38080573/article/details/79364754

版权

javaScript 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

前面两篇分别介绍了BFC以及FFC布局，因为BFC和FFC布局经常用到，而且东西比较多，所以每一个都分别写了一篇文章并且详细的介绍了他们的功能。这里就介绍一些其他布局方式IFC还有GFC布局以及一些布局的总结。

bfc传送门:常用布局之BFC布局_问白的博客-CSDN博客

ffc传送门:常用布局之FFC布局_问白的博客-CSDN博客

IFC(Inline-Formatting-Contexts)即内联格式化上下文布局。一般都是行内元素比如：input a img span 以及display 属性值为inline-block的元素。

而行内元素有哪些特点呢。？如下列举：

水平方向根据direction依次布局。
不会在元素前后换行。
受white-space属性的影响。
margin/padding 在竖直方向无效，水平方向有效的。
white/height 对非替换行内元素无效，宽度由元素内容决定。（替换元素在下面解释）
非替换行内元素的行框高由line-height决定而替换行内元素的行框高则是由height，padding，border，margin决定
浮动或者绝对定位会转化为block
vertical-align属性生效

替换元素我个人理解是他自己元素本身没有实际的东西，最终显示出来的东西需要浏览器根据自身的某一个属性去判断。

比如<img>属性，最终显示的东西由src这个属性值来决定的。再如input元素，最终展现出的东西事由type属性值来决定的。

<textarea>,<select><object>等这些都是替换元素。

IFC的布局规则如下：

框会从包含快的顶部开始，然后一个接一个的排列。
在放置这些框的时候，他们在水平方向上的外边距，边框和内边距所占的空间都会被考虑在内（这样就得到了一个一个的框）。然而在垂直方向上，这些框可能会以不同的方式来对齐，比如他们可以顶部对齐，或者底部对齐也有可能按照文本的基线对齐。而把这一行上的框都包含进去的一个大框我们称之为改行的行框。水平的padding,border,margin有效，竖直方向则无效。不能指定框高。
行宽的宽度由包含块和存在的浮动决定的。行框的高度至少会高到足以包含他内部的所有框。
当一行上的行级总宽度（某一个小框的宽度或者若干个小框的总宽度）小于行宽的时候，他们在行宽内的水平方向上的排布由text-align决定。
当一个行内框的宽度超过了该行的行宽的时候，就会被分成几个框。(ex.文字换行的时候字都不在同一行了，那换行的时候自然就会多一份框，自然也就多了一份行宽)但是如果设置这个框就不能被分割的话（比如，文字强制不给换行white-space设置为nowrap）那么这时候该行内框就会溢出该行的行宽。
一般情况下行宽的左边紧贴在他的包含块的左边，同样他的右边也是紧贴在其包含块的右边。但是也不一定，比如出现浮动的话，浮动元素可能会插在包含块和行框之间。所以一般在同一个IFC中行框通常有相同的宽度（包含快的宽度）但是某一行的行宽的宽度也可能受浮动元素影响，减少了水平可用的宽度了。在同一个IFC中，行框的高度通常是变化的，不一定的，比如某一行的某个框是个很高的图片，而改行框中其他框只是文字。
计算行框内各个框的高度，对于非替换元素就是起line-height,而对于替换元素就是边界框的高度了。行框的高是最顶端框的顶边到最底端框的底边的距离。

包含块的概念：

简单说就是定位参考框或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。定位参考框或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

注意上面提到的几个字眼：框，行框，包含块。

 .container{
            width: 1200px;
            background: #a6d5ec;
            height: 170px;
            margin-bottom: 20px;
        }
        .item{
            margin: 10px;
            padding: 10px;
            width: 420px;
            height: 50px;
            border: 1px solid red;
        }
<div class="container">
   <span class="item">这是一个测试的span元素（非替换行内元素） 设置宽高无效 margin/padding 竖直方向无效</span>
    <input type="text" class="item" value="我是替换的行内元素 input，我设置的宽高 magin/pdding 竖直方向都有效哦">
</div>

IFC布局其实在我们平时业务开发中经常遇到用到，不过可能很多人没有意识到自己所用的就是IFC布局。

还有另一个布局是GFC（GridLayout Formatting Contexts）布局，即网格布局格式化上下文，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。这个布局我感觉不怎么经常用到，所以就提出来，大家知道有这个东西就好了。