[css] line-height
1.line-height几个相关概念
1.1 基线(baseline)
在上图中，我们可以很清晰的分清这几个概念(如果图片不显示，那...)；
顶线：文字最上面的线；
中线：顶线和基线的中间；
基线是基于字母，而不是汉字的底线；
底线：文字最底的线。
1.2 内容框
内容框就是指底线和顶线之间的高度。
1.3 行距，行高
假设有两个相邻文本A，B；
行高(line-height):A，B基线间的距离（引出本文最核心的概念）；
行距：A基线和B顶线间的距离。
1.4 行内框(inline box)
是浏览器渲染模型中的一个概念，无法显示出来，但确实存在，他的高度就是行高的高度。在没有设置特定的布局高度属性等，行内框等于内容框。
1.5 行框(line box)
同样是浏览器渲染模型中一个概念，无法显示。它的高度是本行内所有元素中行内框的最大值。
2.理解line-height
2.1 基本概念
W3C的介绍：该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
2.2 line-height的赋值
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
注：1.任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"；
2.不允许使用负值；
3.原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值；
4.绝大多数的css属性值设置百分比都是基于父元素类似值的百分比，而line-height是基于当前字体大小的百分比。
2.3 line-height继承
line-height是可以继承的。
line-height继承的难点在于设置比例的继承，而固定数值的line-height继承的就是那个数值，接下来我们看几个实例：
line-height:150%
1 <div style="color:#333;font-size:12px;line-height:150%;"> 2 <p style="font-size:32px;">父标签line-height:150%;<br/>父标签line-height:150%;</p> 3 </div>
父标签line-height:150%;
父标签line-height:150%;
line-height:1.5em
1 <div style="color:#333;font-size:12px;line-height:1.5em;"> 2 <p style="font-size:32px;">父标签line-height:1.5em;<br/>父标签line-height:1.5em;</p> 3 </div>
父标签line-height:1.5em;
父标签line-height:1.5em;
line-height:1.5
1 <div style="color:#333;font-size:12px;line-height:1.5;"> 2 <p style="font-size:32px;">父标签line-height:1.5;<br/>父标签line-height:1.5;</p> 3 </div>
父标签line-height:1.5;
父标签line-height:1.5;
可以看到，父元素的行高为150%或1.5em时，会根据父元素的字体大小先计算出行高值然后再让子元素继承，而1.5是根据子元素的字体大小动态计算出行高值让子元素继承。
3.line-height的一些应用
3.1 单行文字垂直居中
把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。
当然有很多方法都能实现，但是这是我最常用的。
3.2 使用行高实现布局
要设置一行文字的高度，很多人都会设置height属性，或者用padding，但是我们知道，height是会触发ie 的haslayout，有时候我们并不想触发，我们可以使用line-height来替代height使文字具有高度。
结语：经验有限，文中有错误之处请指正，本文只对line-height做了一些简单的讲解，兼容性问题并没有研究，以后会补上。
