黑马程序员技术交流社区

标题: 【成都校区】--- line-height的取值 [打印本页]
作者: 小刀葛小伦    时间: 2019-10-10 18:24
标题: 【成都校区】--- line-height的取值
干嘛用的就不说了，说说取值问题，有三种取值：

这里，我们会发现，三类值中各有“相对值”的定义方式，百分比和数字值本身就是“相对值”，单位值中，em/rem等也是“相对值”。
撇开rem不看，em/百分比/数字值都是相对于“font-size”值的，比如：
[CSS] 纯文本查看 复制代码
.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。
单纯这么看，好像这三个没啥区别。然而，真是这样的吗？
[HTML] 纯文本查看 复制代码
<!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找，这边我就简单总结一下：
依据这4条规则，再回头看上面的例子，就可以知道为什么了~~都是聪明人，就不再说了。而，等你真正理解后，你会发现，实际上中间两条没啥用。







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2