line-height 150%和1.5的区别
好惨啊,九点多了没事做还不能下班,坑爹的测试啊~~~
刚才拿这个问题调戏了下部门一位资深前端开发,结果发现,他居然不会,呵呵~~~
这里就说下吧
html:
1 <div class="parent parent1"> 2 父文字 line-height:150% 3 <p class="child">子文字</p> 4 </div> 5 <div class="parent parent2"> 6 父文字 line-height:150em 7 <p class="child">子文字</p> 8 </div> 9 <div class="parent parent3"> 10 父文字 line-height:1.5 11 <p class="child">子文字</p> 12 </div>
css:
1 .parent{width: 800px;margin:20px auto;font-size: 18px;} 2 .parent1{line-height: 150%;} 3 .parent2{line-height: 1.5em;} 4 .parent3{line-height: 1.5;} 5 .child{ 6 background: #f60;color:#fff;font-size: 40px; 7 }
令人期待的效果来了
第一个和第二个的子文字显示很不完整,子元素继承父元素的line-height(150%*18px=27px)
第三个才是我们需要的显示效果,子元素继承父元素的line-height(1.5*40px=30px)
结论:父元素line-height在150%和1.5em时候,子元素会继承父元素line-height大小值,在1.5时候,子元素会继承父元素line-height倍数
快十点了,好像快可以下班了,呵呵,废话比较多,只要记住那段红色的文字就好了