css之熟悉又陌生的line-height属性

自接触css以来，想法就是能够会用就好了，也没有好好研究每一个属性的使用，例如每次设置line-height的时候，脑子里没有具体的定义或者一个轮廓，对line-height属性理解的都不够透。今天专门抽时间好好理理这个属性，争取以后用起来的时候，能够有底气。

随便用百度，google搜索line-height，告诉你的大概都是

上下文本行的基线间的垂直距离

我随便截取一张来自w3school的截图

来自w3school

说实话，我看着这个解释真的没法理解，我谁便挑出几个名词。例如

行间距
基线
对于以上概念，我完全没有一个直观的理解，这些名词没有让我理解行高是什么。当时学习css的时候，就是因为文档概念不清晰，自己又偷懒，没有做过多的深入研究和实践，导致理解的不透彻。坑是早晚要填的，只是时间问题，现在就开始填坑。

我百度找到一张图片，我们可以自己看下

这么复杂，这么多线，这是我的最直观的感受。那就让我们耐心理理吧。

我们看图说话，再一次定义： 行高是指上下文本行的基线间的垂直距离
如果没有图的话，我想大家并不一定知道基线准确的位置。这里，我们对基线一个准确的定义吧，包括行间距：

基线：是指大部分字母所坐落其上的一条看不见的线。如图中所示。更直观一些的话，我们是不是可以理解为：上文本的底线到下文本底线的距离，这样就是一个完整的，没有重叠的结构，更易于我们去计算和理解。
行距: 上面文本的底线跟下面文本顶线的距离。
顶线：平行于文字最高处的那一条直线。
底线：平行于文字最低处的那一条直线。

根据以上的定义，我们得出以下的结论：

行高 = 上文本的底线到下文本底线的距离
行距 + 字体尺寸 = 行高
行距 = 行高 - 字体尺寸 = 上文本的底线和下文本的顶线之间的距离
行距由行高和字体的尺寸决定，其值等于行高减去字体尺寸

line-height 的属性取值

一共有4个，我们一一解析

normal: 默认值，行高为当前字体大小的110%-120%
number：不带任何单位的数字。行高等于此数字与当前字体尺寸相乘的结果
length：以px为单位的固定值
% ：相对于当前字体大小的行高，100% 的行高，相当于当前字体的尺寸。
inherit: 继承父元素line-height属性。

开始实战

一：不设置行高，即属性是normal

<!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>Document</title>
  <style>
     body {
        margin: 0px;
        box-sizing: border-box;
      }
      div {
        text-indent: 2em;
        margin-bottom: 10px;
        border: 1px solid red;
        font-size: 16px;
      }
      #box1 {
        color: #00F;
        /* 不设置line-height的时候，行间距默认是normal,此时是font-size 的110% - 120% */
      }
  </style>
</head>
<body>
  <div id="box1">
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    啊阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什啊ground feduyyyyy
  </div>
</body>
</html>

demo1

上图是一段文字截图一角，此时默认情况下，会有一个行高。font-size是16px的话，行高大概为17.6px 到 19.2px 之间。行距大概就是1.6px - 3.2px之间。

设置line-height：32px

<!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>Document</title>
  <style>
     body {
        margin: 0px;
        box-sizing: border-box;
      }
      div {
        text-indent: 2em;
        margin-bottom: 10px;
        border: 1px solid red;
        font-size: 16px;
      }
       #box1 {
        color: #00F;
        line-height: 32px;
      }
  </style>
</head>
<body>
  <div id="box1">
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    啊阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什啊ground feduyyyyy
  </div>
</body>
</html>

demo2

这次设置行高是32px，正好是font-size的一半。如截图红线框内所示。
但是有个疑问是为何第一行和最后一行会留有空隙，这个稍后继续研究，并更新到文章中。

设置line-height: 80%

<!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>Document</title>
  <style>
     body {
        margin: 0px;
        box-sizing: border-box;
      }
      div {
        text-indent: 2em;
        margin-bottom: 10px;
        border: 1px solid red;
        font-size: 16px;
      }
       #box1 {
        color: #00F;
        line-height: 80%;
      }
  </style>
</head>
<body>
  <div id="box1">
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    啊阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什啊ground feduyyyyy
  </div>
</body>
</html>

demo3

此时的行高为12.8，小于文字高度，开始发生重叠。

line-height 设置1.5

<!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>Document</title>
  <style>
     body {
        margin: 0px;
        box-sizing: border-box;
      }
      div {
        text-indent: 2em;
        margin-bottom: 10px;
        border: 1px solid red;
        font-size: 16px;
      }
       #box1 {
        color: #00F;
        line-height: 1.5;
      }
  </style>
</head>
<body>
  <div id="box1">
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什
    啊阿斯顿发卡上的饭卡的阿设计大赛的咖啡机爱哦权威肌阿斯顿发宽松短裤阿斯顿发卡收到反馈喀什啊ground feduyyyyy
  </div>
</body>
</html>

image.png

此时的line-height是24px。行距就是 24-16 = 8px

单行文本垂直居中

上面几个例子，基本展示了line-height 属性的设置，剩下的我们展示下单行文本垂直居中的效果。

<!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>行高单文本垂直居中设置</title>
  <style>
    /* height === line-height */
    div {
      height: 100px;
      line-height: 100px;
      border: 1px solid red; 
      width: 500px;
      }
  </style>
</head>
<body>
  <div>
    abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
  </div>
</body>
</html>

但是为什么能够实现垂直居中，这个还在研究中，只是记得可以这么实现。等弄清原理了，继续更新文章。