字母x的下边缘就是我们的基线
x-height就是小写字母x的高度
vertical-align:middle中的middle指的是基线网上1/2x-height的高度
ex单位
1ex就是一个x的高度。给图标设置1ex就可以让小图标和文本对齐且居中
line-height
对于非替换元素的纯内联元素，其高度完全由line-height决定
字符的行距=line-height - font-size
误区
（1）设置单行文字的垂直居中只需要设置line-height属性，不需要设置height
（2）line-height可以让单行或者是多行元素近似垂直居中，需要配合vertical-align来实现垂直居中
line-height深入理解
实际开发过程中，line-height的默认值为normal,且normal是一个变量，根据font-family来确定，在各个浏览器的表现也不一样，因此有必要重置line-height的默认值
博客性质的网页推荐line-height:1.6-1.8
布局结构的网页推荐line-height:20px 或：line-height:1.42585