CSS line height 介绍

1. line-height行高的定义就是两基线之间的距离
2. vertical-align默认值就是基线（基线是字体本身的东西）
3. 字母X的下边缘就是基线
4. x-height:代表的的就是基线和等分线之间的距离
5. vertical-align: middle,需要注意的是，middle和median(midline)的区别，这两者并不等价，严格来讲，middle指的是基线（baseline）往上1/2‘x-height’的高度，因此，我们近似可以把middle脑补成字母X的交叉点
因此可见，vertical-align:middle并不是绝得的垂直居中，平常看到的middle效果只是一种近似的效果，严格的垂直居中应该是基于baseline来的居中。
6. 尺寸单位ex:这是CSS中的一个相对单位，指的是小写字母x的高度，其实ex就是代表了x-height而已
ex的价值：不受字体字号影响的内联元素的垂直居中效果，也即是ex就是一个相对于字体字号的单位。
7. 行高：是指上下文本行的基线间的垂直距离 = ① + ② + 2*③ + ④
8. 行距：是指一行底线到下一行顶线之间的垂直距离 = 2*③;即使不是设置line-height,只是设置font-size,行距也是默认不为0的，行距在没有line-height影响下时，会随着font-size的大小变化而动态的改变
9. font-size: 顶线和底线之间的垂直距离 = ① + ② + ④ = 行高 - 行距

10. 内容区就是一行内底线和顶线之间的距离，也就是font-size的面积

11. line-height再用到一个块级元素时候，则定义的是元素中基线之间的最小间距

12. 像素是相对单位长度，实现对于显示器屏幕封边路而言的

13. em是相对单位长度，相对于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被设置，则相对的是浏览器的默认字体尺寸，所以默认情况下1em = 16px, 12px = 0.75em

14. 所谓的padding是从font-size之外的部分开始向外延伸的，也就是内容区以外扩展的区域，因此，padding的区域会和半行距重合起来，如果font-size>=行高的话，那么半行距==0，半行距不可能小于0

15. 在默认情况下, line-height是当前font-size大小的1.14倍，得到的结果四舍五入，如果结果为奇数，上下分成上下半边距（|上半边距-下半边距| == 1）；如果是偶数，则均分成上下两个相等的半边距，因此，当font-size的大小是0的时候，也未必图片就能绝对的垂直居中，之后当line-height-图片size==偶数时才是绝对的居中，但是，对于不同的浏览器，分配方式和默认值1.14可能不同

16. 如果字体大小为0，这时候的基线是一个点或者是一条线，不同的浏览器有不同的差异，

总而言之，对于上面提到的很多线之间的距离并不是固定的或者是对称的，需要摆脱定势思维

17. 从下面的第二个图可以看出，局对局中的位置在不考虑上下半边距影响的情况下，只和字体的大小有关，而中线的确定也只和字体大小有关，可以确定的是，随着字体的变大，中线位置和绝对居中位置的差距会越来越大。

18. 一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。