line-height取值问题

干嘛用的就不说了,说说取值问题,有三种取值:

  • 单位值:em、px等
  • 百分值:100%,200%等
  • 数字值:1,2等

这里,我们会发现,三类值中各有“相对值”的定义方式,百分比和数字值本身就是“相对值”,单位值中,em/rem等也是“相对值”。
撇开rem不看,em/百分比/数字值都是相对于“font-size”值的,比如

.one {
  font-size: 20px;
  line-height: 2em;
}
 
.two {
  font-size: 20px;
  line-height: 200%;
}
 
.three {
  font-size: 20px;
  line-height: 2;
} 

这三个class最终line-height计算值都是40px。
单纯这么看,好像这三个没啥区别。然而,真是这样的吗?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试下line-height</title>
</head>
<body>
  <style>
    div {
      outline: 1px solid #f80;
      margin: 3em;
      padding: 2em;
      font-size: 13px;
    }
    div h1 {
      color: #f80;
      padding-bottom: .5em;
      border-bottom: 1px solid #f80;
    }
 
    /* 下面是正题 */
    div p {
      font-size: 2em;
    }
    .use-em {
      line-height: 1.5em;
    }
 
    .use-percent {
      line-height: 150%;
    }
 
    .use-number {
      line-height: 1.5;
    }
  </style>
 
  <div class="use-em">
    <h1>* em</h1>
    <p>这里,我们会发现,三类值中各有“相对值”的定义方式,百分比和数字值本身就是“相对值”,单位值中,em/rem等也是“相对值”。撇开rem不看,em/百分比/数字值都是相对于“font-size”值的,比如</p>
  </div>
  <div class="use-percent">
    <h1>* 百分比</h1>
    <p>这里,我们会发现,三类值中各有“相对值”的定义方式,百分比和数字值本身就是“相对值”,单位值中,em/rem等也是“相对值”。撇开rem不看,em/百分比/数字值都是相对于“font-size”值的,比如</p>
  </div>
  <div class="use-number">
    <h1>* 数字值</h1>
    <p>这里,我们会发现,三类值中各有“相对值”的定义方式,百分比和数字值本身就是“相对值”,单位值中,em/rem等也是“相对值”。撇开rem不看,em/百分比/数字值都是相对于“font-size”值的,比如</p>
  </div>
</body>
</html>

把这坨代码搞一下,浏览器打开看看,会看到这样的结果:

em、百分比和数字的line-height真的这么单纯吗

是的,你没有看错。从效果来看,em和百分比是一个样的,行与行之间出现了遮挡,而数字值的line-height却完全不一样,行间却很“完美”的显示着。由此可见,虽然都是“相对于font-size”,但是,em/百分比和数字值却有着不一样的计算规则,具体的规则可以去www.w3.org找,这边我就简单总结一下:

  1. line-height是有继承性的
  2. 使用em和百分比,line-height的计算值是“相对于font-size”的值
  3. 使用数字值,line-height的计算值还是原来的数字值
  4. 子元素继承的是父元素的line-height的计算值

依据这4条规则,再回头看上面的例子,就可以知道为什么了~~都是聪明人,就不再说了。而,等你真正理解后,你会发现,实际上中间两条没啥用。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,647评论 1 83
  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 2,271评论 2 2
  • 行高和行距 line-height 是用于定于行高的css属性。什么是行高? 从上图可以清楚看到,一行文本对应会有...
    亚历山大猫阅读 338评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 439评论 0 2
  • 作者:HelKyle链接:http://www.w3cplus.com/css/when-to-use-em-vs...
    红叶丶秋鸣阅读 1,080评论 0 3