什么是行高
在学习CSS时，我们会听到“行高”这个词汇。简单来说，行高就是一行文字的高度，包括文字的高度、上下的间隔、边框和填充等。它的作用是调整行与行之间的距离，让文本更加易读。
在CSS中，我们可以使用line-height属性来设置行高。这个属性可以接受不同的值，比如固定值、百分比、单位和数字等，本文将详细介绍如何使用这个属性来设置行高。
使用固定值设置行高
使用固定值设置行高最简单，也是最常见的方式。我们可以直接使用line-height属性设置一个像素值，像这样：
p {
line-height: 24px;
}
上面的代码会将p元素的行高设置为24像素。
需要注意的是，如果行高的像素值大于文字本身的像素值，文本就会在行中上下居中显示。比如一段font-size为16px的文本，当行高设置为24px时，文本会在中间位置显示。
当然，我们还可以使用多个属性，同时设置字体大小和行高：
p {
font-size: 16px;
line-height: 24px;
}
这样就可以将p元素的行高和字体大小都设置为固定值。
使用百分比设置行高
除了使用固定值，我们还可以使用百分比来设置行高。这种方式适用于响应式设计，在不同尺寸的屏幕上保持一致的行高。
我们可以这样设置：
p {
line-height: 150%;
}
上面的代码会将p元素的行高设置为字体大小的150%。
还可以结合使用不同的单位，比如：
p {
font-size: 16px;
line-height: 1.5;
}
上面的代码和之前一样，但是这里使用了数字，表示行高是字体大小的1.5倍。
使用数字设置行高
除了使用固定值和百分比，我们还可以使用数字来设置行高。这种方式适合于开发者对于某个元素的行高有一个精准的计算结果。
我们可以这样设置：
p {
font-size: 16px;
line-height: 1.5;
}
上面的代码会将p元素的行高设置为24像素（16x1.5=24）。
需要注意的是，当行高的数字值和文字本身的大小之间有小数点时，浏览器会根据自己的算法取舍最终的高度值。
行高的使用技巧
掌握好比例关系
在使用行高时，我们需要注意字体、行高和边框之间的比例关系。比如，大字体的行高需要比小字体的行高更大，来增加行与行之间的距离防止阅读困难。
下面的代码是一个例子：
h1 {
font-size: 40px;
line-height: 1.2;
}
p {
font-size: 16px;
line-height: 1.6;
}
上面的代码将h1元素的行高设置为48像素（40x1.2=48），将p元素的行高设置为25.6像素（16x1.6=25.6）。这样可以保证文字的观感合适，行与行之间有足够的距离。
避免使用负数行高
尽管CSS允许我们使用负数的行高，但是我们尽量避免使用它。因为使用负数行高会导致文本重叠、难以阅读、排版不合理，影响用户体验。
下面的代码将p元素的行高设置为-1.5：
p {
font-size: 16px;
line-height: -1.5;
}
上面的代码会导致文本重叠，超出界限：
因此我们要避免使用负数的行高。
使用不同的行高增加视觉层次
我们可以使用不同的行高来增加文本的视觉层次，比如设置一个较小的行高使文本显得更加紧凑，设置一个较大的行高使文本更加松散。
下面是一个例子：
h1 {
font-size: 40px;
line-height: 1.2;
}
h2 {
font-size: 32px;
line-height: 1.3;
}
p {
font-size: 16px;
line-height: 1.6;
}
上面的代码会将h1元素的行高设置为48像素、h2元素的行高设置为41.6像素、p元素的行高设置为25.6像素。这样可以在视觉上增加文本的层次感。
总结
通过上面的分析，我们可以知道如何使用line-height属性来设置行高，并且还掌握了设置行高的技巧。在实际开发中，我们需要根据实际情况来进行选择，选取合适的行高增加文本的可读性，提高用户体验。