行内元素
em a 非替换元素 img 替换元素
两者在内联内容处理方式不一样。
inline有时候被翻译成内联，比如inline content，有时候被翻译成行内 inline box。
行布局
行内元素只是生成一个框，没有其他内容（里面不能放框了可能）与之并存。
单行行内元素
多行行内元素
相邻两行之间的边框，firefox不重叠，上一行的下边界在下一行的上边界的下边，交错着的。似乎chrome是重合的不一样。
水平方向对齐方式 text-align
left right center justify
justify调整每行的word之间的空白，文本两侧和内容区两侧对齐。
基本术语和概念
匿名文本 anonymous
未包含在行内元素标签的文本。比如<p>inline</p>，p是块级元素，之中的文本inline没有被内联标签包括，为匿名文本。
em框
字符框，实际字形可能更高或矮，font-size决定了em框的高度。
内容区
非替换元素，em框串在一起构成框为内容区，或者字符字形描述的框构成内容区，也就是字体设计者设计的实际的大小。试了试每个浏览器不一样，比如设置一个内联非替换元素font-size：12px，内容区高度firefox的内容区高度14px，有时候不同的浏览器还不一样，浏览器应该是用的第二种方案。对于替换元素，内容区为固有高度加内外边距及边框。
行间距 leading
font-size 减去 line-height 为行间距，均分两份（half-leading）放在内容区上下。
行内框 inline box
行内框就是行间距加上内容区。行内框高度的决定：非替换元素的行内框的高度line-height，替换元素内容区高度加内外边距和边框。
行框 line box
不同于行内框，行框是指一行（可能有多个行内框）中的最高的行框到最低行框的距离。
一行如何一步步构成一个行框
一些概念的解释：
- 内容区类似于块级元素的内容框。
- 行内元素背景应用于内容去和内边距。和块级元素一样。
- 行内元素的边界（指想象的盒子边界而不是盒子模型的border）包括内容区加上内边距和边框。
- 非替换元素的padding margin 不影响形成的行内框的高度。have no vertical effect on inline elements or the boxes they generate
- 替换元素的padding margin就会影响形成的行内框的高度。
行框的形成：
- 确定行内框的高度。行内非替换元素为line-height减去font-size，平分两份，在font-size确定的em框上下放置，形成行内框，行内替换元素，行内框由margin，padding，border加起来。
- 对各个内容区，内容区的各个元素及匿名文本的基线位置，替换元素就没有基线，用底部，然后对齐。
- 根据vertical-align 调整垂直偏移量。行内框要上/下移动多少。
- 计算最后的行框的高度，一行各个行内框的最高的和最低的之间的距离。
行内格式化
line-height决定行框高度。
行内非替换元素
建立内容区
行内框 inline box
基线对齐之后，形成行框 line box
***
垂直对齐 vertical-align
行内框垂直对齐方式
top 行内框的顶部和行框的顶部对齐。bottom 类似
text-top 行内框的顶部和父元素的内容区顶部对齐。另有text-bottom
理解，text-top和内容区（由line-height）顶部对齐，top则是行框（内容区加上行间距）对齐。
关于vertical align 的文章 http://christopheraue.net/2014/03/05/vertical-align/
center 元素基线上0.5ex（ex为以行高作单位）
super 元素内容区和行内框上移 sub下移 可以设定为百分数。
***
管理line-height
如果line-height设置成一个绝对的值，比如14px，如果字体大小大于14px，行间可能会出现重叠。可将line-height 设置成1，表示line-height为font-size的一倍。
但，如果有边框的话，由于line-height不包括边框，也可能出现重叠，只有单独设置带边框的行内框的line-height。
***
缩放行高 line-height:后接数字表示font-size的倍数
***
增加框属性
border是绕着内容区+padding的，而不是line-height的。
上下边框、上下内边距及上下外边距不影响line-height对于非替换行内元素的布局。