关于行高写法

   CSS里的行高即line-height ，有三种写法。
   1.百分比 如 : line-height: 150%
   2.纯数字 如 : line-height: 1.5
   3.数字+单位 如: line-height:24px;

   第三种比较好理解，这里不说了。 1和2都是按百分比来计算行高，两者有什么不同呢？ 以下举例子来说明：

   

<style>
    #exp1{font-size:12px;line-height:150%;}
    #exp2{font-size:12px;line-height:1.5;}
    h1,p{font-size:30px;}
</style>
<div id="exp1">
    <h1>sample1</h1>
    <p>description1</p>
</div>
<div id="exp2">
    <h1>sample21</h1>
    <p>description</p>
</div>

    预览一下看看，例1中的h1和p计算出来的行高都是18px , 而例2中 h1和p的高行是45px;

    其原理也很简单，当使用百分比来定义时，容器里的元素是会直接继承到父元素计算出来的实际行高( 12px*150%)。

    当使用纯数字定义时，子元素继承到的是1.5，再拿自身的font-size来计算实际行高(30px*1.5)。