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

     今天看到一篇文章，说的是CSS学习中的瓶颈，我最近也发现自己css很薄弱，写的样式总是有兼容性问题，要写很久，发现了一个问题，我从来没有用过line-height:150和line-height:1.5，都是直接用xxpx的，所以一直不知道这2者竟然有区别，长见识了。下面说下2者的区别：      

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

    如：

父元素设置属性：font- size:14px;line-height:1.5,child设置font-size:26px;

那么父元素：line-height = 14px * 1.5 = 21px，子元素：line-height = 26px * 1.5 = 39px。

 

父元素设置属性：font-size:14px;line-height:150%,child设置font-size:26px;

那么父元素：line-height = 14px * 150% = 21px，子元素：line-height = 父元素的line-height = 21px。

 

-----------------------------------------------------------------------------------------------------------------

最近的自己有点浮躁，在学习的道路上任重而道远啊。。。