IFC

定义

• 行内元素

              首先，IFC与行内元素密不可分，行内元素指的是strong或span之类的元素。这些元素不会在以前或以后生成“行分隔符”，他们是块级元素的后代。经过声明display：inline/inline-block/inlin-table，可让元素成为inline-level element。

• IFC

              IFC：行内格式化上下文，应用了IFC的行内元素的盒子不会在以前或以后生成“行分隔符”，他们是块级元素的后代。

•  触发IFC：display：inline。

盒子分类

盒子的类型会在必定程度上影响盒子的视觉格式化模型，因此，要对CSS中各类盒子的类型区分清楚。

须要注意的是：block container box指的是仅包含block-level boxes或者仅包含inline-level boxes的box。其中，仅包含block-level boxes的block container box是block box，其他的block container box为inline-block box。

line-box与inline-box

行内格式化上下文涉及到两种盒子(boxes)：行框(line box)以及行内框(inline box)。

• inline box：inline-level元素（display: 'inline', 'inline-table', and 'inline-block'）会产生inline-level boxes，这些box参与了IFC，则这个box就是inline box。
• line box：inline-level box水平排列，浏览器的一整行生成一个行框(line box)，因此一个行框(line box)可能包含多个行内框(inline-level box)。

line box与inline box的高度

•  line box：行框的上边界要位于最高行内框的上界，而行框的底边要放在最低行内框的下边界
  

           line box的高度由block-progression与其子inline-level boxes的对齐方式决定，具体的计算方式以下：

line box 必须包含全部子代inline boxes
line box 必须包含替换inline-level 元素的margin部分
line box 必须包含inline block元素的margin部分

•  inline box：盒子的高度等于元素的line-height值
  
  

line-height高度计算

替换元素与非替换元素

• 替换元素：元素内容的部分并不是由文档内容直接表示。eg: img、input
• 非替换元素：元素内容由浏览器在元素自己生成的框中显示。eg：段落，标题，单元格

line-height高度计算

•  非替换元素：行间距 =（line-height - 内容区高度)/ 2
•  替换元素：line-height = 内容区高度，无行间距
  

一行中inline boxes的数目由vertical-align的值决定。

行内非替换元素的content box没法经过设置height与width来设置。content box的高度仅能经过属性font-size来设置；content box的宽度则自适应其内容而没法经过属性width设置，而是等于其子行级盒子的外宽度(margin+border+padding+content width)之和。

替换元素，元素行内框的高度则刚好等于内容区的高度，由于行间距不该用到替换元素，而且边框和外边距会影响该元素行内框的高度，相应的可能影响包含该元素的行框的高度。

IFC渲染规则 

每一个元素都相对于其包含块摆放；能够这麽说，包含块就是一个元素的“布局上下文”，包含块由最近的块级祖先元素、表单元格或行内块祖先元素的内容边界（content edge）构成。可是没必要担忧行内元素，由于他们的摆放方试并不直接依赖于包含块。

水平方向上：各inline-level box从包含块的顶部在自左到右水平排列，line box的左边缘挨着它的包含块的左边缘，右边缘挨着它的包含块的右边缘。然而，浮动盒子也许会在包含块边缘和line box边缘之间。所以，尽管line boxs在一样的行内格式上下文中一般都有相同的宽度(就是他的包含块的宽度)，可是水平方向上的空间由于浮动被减小了，它的宽度也会变得复杂。

竖直方向上：各inline-level box根据vertical-align属性值相对各自的父容器做垂直方向对齐;

水平与垂直对齐属性

vertical-align:该属性定义行内元素的基线（指的是行内框的基线，而不是contentarea）相对于该元素所在行的基线、顶、底等(vertical-align: baseline、top、bottom)的垂直对齐。只能应用于inline水平和’table-cell’元素，它仅做用于自身，对里面的子元素设置vertical-cell属性是不起做用的。baseline为默认：元素放置在父元素的基线上。

text-align:该属性规定元素中的文本的水平对齐方式。

参考

http://meyerweb.com/eric/css/inline-format.html