<1> 基线、底线、顶线、中线
文本的基线：
元素的基线：
一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
<2> 行距&&行高
行高： 包括内容区与以内容区为基础对称拓展的空白区域，可以认为是相邻文本行基线间的距离。
行距： 指相邻文本间上一个文本行基线和下一个文本行顶线之间的距离
<3> 行内框
行内框： 1/2 行距（上）+ 内容 + 1/2 行距（下）
<4> vertical-align
可选值：
-
baseline： 基线对齐；
-
top： 顶端对齐；
- 文本内容是**元素的`行内框`的顶端与行框的顶端对齐** - 图片是顶端
-
text-top： 文本的顶端对齐；
- 是将**元素行**内框的顶端同**文本行**的顶线对齐
-
middle： 中部对齐；
- 图片的垂直方向的中线与文本行的中线对齐。
有点奇怪的，会发现图片并不会完全在父盒子中实现垂直居中！！原因在这！！ line-height 和 vertical-align 的疑难杂症
总的原因就是： middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。
总的解决办法就是：
- 设置父盒子的 `font-size : 0`
- or 设置父盒子的 `line-height`为一个较小的值
- bottom： 底端对齐；
- text-bottom： 文本的底端对齐；
- 百分比和长度： CSS2，可为负数。
