css中的IFC

主要是介绍了IFC的原理和应用

IFC

• IFC：行格式化上下文（和BFC块级格式化上下文相对应）——又叫 内联格式化上下文
• 内部的元素从包含块的顶部开始，从左至右排列成一行，形成一个矩形盒子叫line box。
• 特点：
  • 子元素水平方向横向排列，并且垂直方向起点为元素顶部。
  • 子元素只会计算横向样式空间，【 padding、 border、 margin】，垂直方向样式空间不会被计算，【 padding、 border、 margIn】。
    • 自注：这也是为什么我们在给行内元素设置上下padding时撑不开空间的原因。
  • 在垂直方向上，子元素会以不同形式来对齐（ vertical-align）
  • 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（ine box）。行框的宽度是由包含块（ containing box）和与其中的浮动来决定。
  • IFC中的“ line box"一般左右边贴紧其包含块，但float元素会优先排列。
  • IFC中的“ line box"高度由Css行高计算规则来确定，同个lFC下的多个line box高度可能会不同。
  • 当前 inline-level boxes的总宽度少于包含它们的 line boκ时，其水平渲染规则由 text-align属性值来决定。
  • 当一个“ inline box"超过父元素的宽度时，它会被分割成多个 boxes，这些oxes分布在多个“ line box"中。如果子元素未设置强制换行的情况下，“ inline box”将不可被分割，将会溢出父元素。
• 行内（块）元素：默认是基线(baseline)对齐。
  • 基线：字母x最底部的那条线。
  • 这就引入一个图片和文字的问题：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
    • 解决方法：
      • 1：vertical-align的值设置为非baseline——这种方法副作用小。
      • 2：img声明为block元素
      • 3：父元素设置font-size：0
      • 4：父元素line-height：设置为足够小
• 利用IFC我们可以：多行文本垂直居中对齐、不定高图片和文本垂直居中对齐，等其他效果。