line-height: 2和line-height: 200%

2019-01-17 本文已影响0人天幕下悠悠

答案为：
line-height: 2 表示单行文本的行高为它本身的两倍
line-height: 200% 表示单行文本的行高为系统默认字体的200%
在继承性上：
对父元素设置了line-height: 2后，父元素的子元素会继承line-height: 2这个属性，子元素的行高都是自身高度的2倍，是相对大小，子元素的字体大小不同，行高也会不同；
对父元素设置了line-height: 200%后，父元素的子元素会继承系统默认字体的200%，是一个固定的值，是固定大小，子元素的字体大小不同，行高都是固定某个值；

实际写代码验证下，看看对不对

浏览器：chrome（Chrome的默认字体大小为16px）

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>line-height: 2;</title>
  <style>

    .one {
      line-height: 3;    /*为了更好的区分，这里设置为3*/
    }

    .two {
      line-height: 200%;    
    }

  </style>
</head>
<body>
  <div class="one">
    line-height应该是他本身字体16px的3倍
  </div>

  <div class="two">
    line-height应该是系统默认字体16px的200%
  </div>

</body>
</html>