CSS中的行高（line-height）用法详解

在CSS中，line-height是一个非常重要的属性，它决定了文本行之间的垂直间距。正确使用line-height不仅能提高文本的可读性，还能优化网页的整体视觉效果。本文将详细介绍line-height在CSS中的用法及其应用场景。

基本概念

line-height属性定义了行框的高度，即文本行之间的垂直距离。它可以用多种单位来表示，包括像素（px）、百分比（%）、em、rem等。默认情况下，浏览器会根据字体大小自动设置行高，但我们可以通过line-height来手动调整。

用法

数值单位：
```
p {
    line-height: 1.5; /* 行高是字体大小的1.5倍 */
}
```
这里的数值是无单位的，表示行高是字体大小的倍数。
像素单位：
```
p {
    line-height: 24px; /* 固定行高为24像素 */
}
```
这种方式可以精确控制行高，但不利于响应式设计。
百分比：
```
p {
    line-height: 150%; /* 行高是字体大小的150% */
}
```
百分比相对于当前元素的字体大小计算。
继承：
```
body {
    line-height: 1.6;
}
```
设置在body上的line-height会继承给所有子元素。

应用场景

提高可读性：适当的行高可以增加文本之间的间距，使阅读更加舒适。例如：
```
.article {
    line-height: 1.8;
}
```
垂直居中文本：通过设置行高等于容器高度，可以实现文本的垂直居中：
```
.button {
    height: 50px;
    line-height: 50px;
}
```
响应式设计：使用相对单位（如em或百分比）可以使行高在不同设备上自动调整：
```
.responsive-text {
    font-size: 16px;
    line-height: 1.5em;
}
```

多行文本截断：配合display: -webkit-box;和-webkit-line-clamp可以实现多行文本的截断效果：

.truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

注意事项

行高与字体大小：行高是基于字体大小的，如果字体大小改变，行高也会相应改变。
行高与行内元素：行内元素（如<span>）的行高会影响其父元素的行高。
行高与行距：行高不等于行距，行距是行高减去字体大小。

总结

line-height在CSS中是一个多功能的属性，它不仅影响文本的可读性，还能用于实现各种布局效果。通过合理设置line-height，我们可以提升网页的用户体验，确保文本在不同设备和分辨率下都能呈现最佳效果。希望本文能帮助大家更好地理解和应用line-height，在实际项目中灵活运用。