重温CSS核心知识（一）：line-height

2017-08-06 本文已影响140人 69a7b6c3b4c7

图片来自Google.png

在今天谈到样式表，会先想到styled-components、CSS-Modules等等这些最新的技术，很少有人会提到CSS如何如何。张鑫旭是前端大神里研究CSS的代表人物，可是他在博客却表示也只是掌握到皮毛，虽然知道这是谦虚，但也确实说明了掌握CSS和掌握好CSS差距还是相当大的。

line-height的定义

定义：两行文字基线之间的距离

baseline就是基线.png

line-height的各种取值

normal

取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为1.2，这取决于元素的 font-family。

<number>

该属性的应用值是这个无单位数字<number>乘以该元素的字体大小。计算值与指定值相同。

<length>

用于计算 line box 的高度。

<percentage>

与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。

一行文字的高度

先看一个例子：

<style>
.txt {
  font-size: 14px;
  border: 1px solid #ccc;
}
</style>
<body>
  <p>测试一行文字</p>
</body>

测试效果图.png

可以看到，在未给p.txt设置高度的情况下，它的最终在浏览器的渲染效果是，高度为22px。起初我很简单的认为，p.txt即使没有设置高度，但是它有文本节点，高度自然而然是被文字给撑了起来。

其实并不然，最终的结论是，p.txt在未设置高度的情况下，高度是给line-height撑了起来。这里再来做一个测试。

<style>
.txt1 {
  font-size: 0;
  line-height: 50px;
  border: 1px solid #ccc;
  margin-bottom: 50px;
}
.txt2 {
  font-size: 16px;
  line-height: 0;
  border: 1px solid #ccc;
}
</style>

<body>
  <p class="txt1">我是一行文字</p>
  <p class="txt2">我是一行文字</p>
</body>

给p.txt1设置0像素的字体大小，再设置50像素的行高。再给p.txt2设置16像素的字体，大小为0的行高，看他们在Chrome浏览器最终的表现情况：

测试行高是否真的是行高在起作用.png

可以看到p.txt1虽然字体大小为0，但是却占据52个像素（行高+边框）的高度，而设置16像素字体大小的p.txt2却没能被字体撑开。这说明了，未设置高度的且包含文本节点的元素的高度，是受line-height影响的。

半行间距

半行间距就是黄色部分 =（360-240) / 2 = 60.png

在设计稿中的间距无非是，图片与图片之间、文字与图片之间、文字与文字之间和盒子与盒子之间。半行间距的概念对于还原设计稿是十分重要的，很多时候设计稿没有接近于百分百还原，很可能就是因为在量取文字与其他元素的之间的间距出了问题。在量取文字与其他元素的之间的距离时，切不可忘记了半行间距，否则很有可能被设计师提意见。

扩展阅读

css行高line-height的一些深入理解及应用
 line-height | CSS-Tricks
规范之路 -line-height 的工作原理