line-height
参考线的概念
- 基线：小写字母x的下边缘
- 中线(median)：小写字母x的上边缘
- 大写字母高度线:大写字母的上边线
- 顶部线
- 底部线
x-height:一个x的高度
vertical-align:middle就是半个x-height的高度，也就是x的交叉点，所以能够理解为什么vertical-align不能够帮助我们实现垂直居中，而是只能够近似的帮我们实现垂直居中。- ex：就是一个x-height的高度。利用这一个特点我们可以实现不受字号影响的垂直居中对其效果。
line-height的取值
默认normal，根据每个浏览器以及不同操作系统不同字体的解析而异
- 百分比（150%）：是与当前的font-size相乘后的值
- 倍数（1.5）：是与当前font-size相乘后的值
- 具体值（20px）
- em（2em）：是与font-size相乘后的值
line-height对于内联元素的影响
line-height是内联元素高度的基石，如果没有line-height，即使有font-size内联元素的高度依然无法支撑
line-height代表了一个行框盒子的基础高度，假设line-height：16px，那么一行行框盒子的高度就是16px，两行就是32px，有几行这个行框盒子的高度就有几个16px。同时我们还通过对line-heigt进行设置，改变了行距，这样就撑起了整个行框盒子的高度
- 为内联元素设置行距
- 行距= line-height - font-size
- 半行距= （line-height-font-size）/2 上下等分
- 对内联元素实现垂直居中的效果
很多小伙伴在开发的时候可能遇到需要对内联元素设置居中的场景，而我们使用的方式是
height与line-height值一样，这样就实现了文字的垂直居中。实际上我们不需要去设置height，仅仅设置line-height就能实现。因为line-height本身就有设置行距的作用
line-height对于块状元素的影响
line-height是内联元素的特性，无法对块状元素产生影响
但是有的小伙伴可能会疑问，为什么我在块状元素上面设置了line-height，依然产生了影响。
- 首先一点，line-height是有继承特性的，它不会对本块级元素产生影响，但对块级元素中的行框盒子会发生影响
- 其次，有行内元素的地方就有“幽灵空白节点”，“幽灵空白节点”的本质就是一个空白的行内元素，所以line-height也会作用到它，这就造成了我们看到的对块状元素发生了影响的效果
line-height的最大值特性
由于line-height是继承属性，当父子级同时设置了line-height的值时，当前元素的高度就是由line-height较大的那个值决定的
