zoukankan      html  css  js  c++  java
  • 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倍数

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

  • 相关阅读:
    Nginx Record
    Go 查找元素
    博客转移公告
    模板库
    模板库
    【BZOJ2276】Temperature
    【BZOJ3524】Couriers
    【BZOJ4458】GTY的OJ
    AtCoder Grand Contest 007
    Editing 2011-2012 ACM-ICPC Northeastern European Regional Contest (NEERC 11)
  • 原文地址:https://www.cnblogs.com/peace1/p/5343000.html
Copyright © 2011-2022 走看看