zoukankan      html  css  js  c++  java
  • line-height:150% 和 line-height:1.5

    line-height属性的细节
    与大多数CSS属性不同,line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。


    有单位(包括百分比)与无单位之间的区别
    有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。

    1  当line-height:xxx %时:
    body{ font-size:14px; line-height:150%;  }
    h1{ font-size:26px; }
    实际结果就是:
    body{ line-height:21px; /* 14px*150%=21px */ }  
    h1{ line-height:21px; } /* 继承父元素计算出来的line-height ,21px */


    2  当line-height:x.x 时:
    body{ font-size:14px; line-height:1.5;  }
    h1{ font-size:26px; }
    实际结果就是:
    body{ line-height:21px; /* 14px*1.5=21px */ }   
    h1{ line-height:39px; /* 26px*1.5=39px */ }  
     

  • 相关阅读:
    Spark学习--SparkCore03
    2D特效和3D特效
    CSS3选择器在HTML5中的使用
    HTML5中表单中新增加元素
    HTML5简介
    机器学习系列:
    机器学习系列:
    机器学习系列:
    机器学习系列:
    机器学习系列:
  • 原文地址:https://www.cnblogs.com/mguo/p/3161277.html
Copyright © 2011-2022 走看看