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