css属性line-height行高的深入理解及用法

打卡第一天，学习整理东西，以备后用，顺带打点鸡血，喝点鸡汤，让自己可以更有信心整理下去。

当一个小小的心念变成成为行为时，便能成了习惯；从而形成性格，而性格就决定你一生的成败。

line-height（行高）是指一行文字的高度，具体来说应该是两行文字之间基线的垂直距离。

说到基线，那咱们先分析下这个基线。

一行文字包括中文和英文，从上到下包括四条线，分别是顶线，中线，基线，底线，这个很像上学学英语时候的四线三格，而在css中这四条线对应的值分别为top、middle、baseline、bottom，其属性名是vertical-align（垂直居中）。这块需要注意的地方就是区分基线和底线，基线不是最下面的线，最下面的线是底线，而行内元素（包括文字、图片、表单输入元素等）对齐方式也是基于基线对齐的。

这节咱们主要讲的是line-height，所以对vertical-align在下节再深入讲解，现在咱们回到line-height上来。

line-height可以支持属性值为无单位的数字，这个与其它的css属相有些不同。

下面看一下line-height支持的属相值：
normal（默认值）根据浏览器的不同，在1~1.2之间。
number为无单位数字，行高为该数字乘以字体尺寸（font-size）得到的结果，这块我在知乎上看到有同学理解为一个系数，很不错，我搬过来用一下，他写到，子元素仅继承该系数，子元素的真正行距是分别与自身元素字号相乘的计算结果。大多数情况下推荐使用，可以避免一些意外的继承问题。
length固定的行高，单位有px、em、rem等

percentage百分比，基于当前字体尺寸的百分比行高。

接下来再学习几个概念：行距、半行距、内容区域、行内框和行框。
行距是指一行底线与下一行顶线的垂直距离（对照上面的图，你也可以理解为行高与字体尺寸（font-size）的差）。
半行距是指行距的一半。
内容区域是指一行中顶部与底部的区域，它一般是由字体尺寸（font-size）决定的。
行内框（inline box）只是一个概念，它无法用css属性体现出来，它会受到内边距（padding）、行高（line-height）等属相的影响。
行框（line box）同样只是一个概念，它同样无法用css属相体现出来，它的高度等于本行内所有元素中行高最大的值。