line-height 150%和1.5的区别

好惨啊，九点多了没事做还不能下班，坑爹的测试啊~~~

刚才拿这个问题调戏了下部门一位资深前端开发，结果发现，他居然不会，呵呵~~~

这里就说下吧

html:

 <div class="parent parent1">
     父文字 line-height:150%
     <p class="child">子文字</p>
 </div>
 <div class="parent parent2">
     父文字 line-height:150em
     <p class="child">子文字</p>
 </div>
 <div class="parent parent3">
     父文字 line-height:1.5
     <p class="child">子文字</p>
 </div>

css:

 .parent{width: 800px;margin:20px auto;font-size: 18px;}
 .parent1{line-height: 150%;}
 .parent2{line-height: 1.5em;}
 .parent3{line-height: 1.5;}
 .child{
     background: #f60;color:#fff;font-size: 40px;
 }

令人期待的效果来了

第一个和第二个的子文字显示很不完整，子元素继承父元素的line-height（150%*18px=27px）

第三个才是我们需要的显示效果，子元素继承父元素的line-height（1.5*40px=30px）

结论：父元素line-height在150%和1.5em时候，子元素会继承父元素line-height大小值，在1.5时候，子元素会继承父元素line-height倍数

快十点了，好像快可以下班了，呵呵，废话比较多，只要记住那段红色的文字就好了