CSS的line-height

关于line-height,即行高，大部分学习过css的同学都知道可以利用其来实现单行文本居中，即让盒子高等于行高，便可以实现这个效果，下面来看一下实现原理

行高的组成

行高=上距离+内容高度+下距离

关于基线，我们不要理解成我们平时写的汉字的底部，而是英文子母中如s，h等字母的底部，那一条线称为基线，而类似g，y这种字母底部的那条线称为底线，而两行文字基线于基线之间的距离，就称为行高

让行高等于盒子高，之所以能实现文本居中，就是因为行高的上距离和下距离始终是一样的，这样就相当于把内容推到了盒子中间，自然就实现了文字垂直居中

操作	效果	原因
行高等于盒子高	文本在盒子中垂直居中	原因见上
行高大于盒子高	文本在盒子位置偏下	文本上距离变大，所以文字偏下
行高小于盒子高	文本在盒子中位置偏下	文本上距离变小，所以文字偏上