line-height:150%/1.5em与line-height:1.5的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line-height值的形式不同子元素的行高也会不同</title>
    <style>
        .father{font-size: 14px;background:#ccc;}
        .son{font-size:26px;}

        .father1{line-height: 150%;}
        .father2{line-height: 1.5;}
        .father3{line-height: 1.5em;}
    </style>
</head>
<body>
    <p>父元素的字体大小为14px,子元素字体大小为26px</p>
    <h2>父元素行高为150%时</h2>
    <div class="father father1">
        父元素font-size:14px;line-height:150%;计算值是 14px * 1.5 = 21px
        <div class="son">
            子元素font-size:26px;line-height = 父元素行高 = 21px;
        </div>
    </div>
    <h2>父元素行高为1.5时</h2>
    <div class="father father2">
        父元素font-size:14px;line-height:1.5;计算值是 14px * 1.5 = 21px
        <div class="son">
            子元素font-size:26px;line-height会继承父元素的1.5，计算得值26px * 1.5 = 39px(子元素的行高);
        </div>
    </div>
    <h2>父元素行高为1.5em时</h2>
    <div class="father father3">
        父元素font-size:14px;line-height:1.5em;计算值是 14px * 1.5 = 21px
        <div class="son">
            子元素font-size:26px;line-height = 父元素行高 = 21px;
        </div>
    </div>
</body>
</html>

微信号“前端大全‘中看到一篇”这可能是史上最全的CSS自适应布局总结“中看到张鑫旭的”学习CSS的瓶颈“，在其中看到一个问题”line-height:150%和line-height:1.5的区别是？“（这引玉深度。。。）特此记录下自己学习的东西，方便以后进行查阅。

line-height的值：normal | <number> | <length> | <percentage>

百分比中的"%"：是继承父级元素的距离；

"无单位"：是子元素计算各自的行距离

两者的区别：

父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

http://www.cnblogs.com/starof/p/4742323.html

https://www.zhihu.com/question/20394889

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

http://www.zhangxinxu.com/wordpress/2009/11/css行高line-height的一些深入理解及应用/