关于行高写法

   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)。

转载于:https://www.cnblogs.com/pwj1230/archive/2011/03/24/1993832.html