css的line-height:1.5,line-height:150%,line-height:1.5em,line-height:15px的区别

看到一道面试题据说是最基础的东西，但是发现我还是不太清楚（css会用但是太细节的真心记不住）下面就在博客上记录一下：

首先要说一下line-height在api中的语法是：

line-height：normal | <length>| <percentage>| <number>；

line-height：主要是设计元素的行高，

我们现在这里假设font-size：24px；

1.首先是px的，设置行高是15px的话，那么我们得到的行高自然也是15px；没什么区别的；

2.如果是em的话，首先要看看默认的网页的字体像素，通常都是16px，所以说1em=16px。而对于本文中设置了24px，所以说1.5em就是1.5*24=36px;就是说行高设置了36px；

3.下一种百分比，我们同样要换算成px的，百分比也是基于当前字体尺寸的，100%=1em；在本题中是150%就是说为1.5em，就是1.5*24=36px；

4.最后一种是数值的，没有任何的单位，也被称为因子方式，使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。因子方法的数值是县继承后计算的，而其他的三个是先计算在继承的，所以如果说是按照理他最近的那个子元素的font-size乘上1.5；

最后用例子总结一下区别：

出一道题看看和你想的一样吗？：

以这个为例子第7行现在是1.5那么结果就是，首先文字不会发生重叠，单行行高是1.5*48=72px；（注意因为这里为了展现出重叠效果所以写了大量的文字，总的行高是要在乘上行数的，不过一定是72的倍数）。

第7行是1.5em和150%或者是36px，最后都是单行行高为36px，和div2里面的48没关系，是有div1的24*1.5决定的。三者都会发生文字重叠现象......

大家可以自己试试，图片插不进来了

所以说这里要知道的就是1em=16px=100%；