1. 简介
line-height是CSS中的一个重要属性，用于设置行高。它决定了行框盒模型的高度，影响文字在行框内的垂直对齐方式。
2. 基本用法
line-height可以使用各种不同的单位进行设置，包括像素(px)、百分比(%)、字体相对单位(em、rem)等。
我们可以通过以下方式进行设置：
/* 使用像素(px)设置行高 */
p {
line-height: 24px;
}
/* 使用百分比(%)设置行高 */
p {
line-height: 150%;
}
/* 使用字体相对单位(em、rem)设置行高 */
p {
line-height: 1.5em;
}
3. 行高的计算方式
line-height的计算方式相对复杂，它受到字体大小、行高设置和文字本身属性的影响。
当设置行高为一个无单位的数值时，它会根据当前元素的字体大小来计算最终的行高。
当设置行高为一个有单位的数值时，它会直接使用这个数值作为行高。
此外，行高还可以通过计算公式来确定。
例如，当文字的字体大小为16px，行高设置为1.5时，最终的行高计算方式为：
行高 = 字体大小 × 行高设置 = 16px × 1.5 = 24px4. 行高的作用
line-height不仅仅是设置行框盒模型的高度，它还影响了行内元素的垂直对齐方式。
当行高大于文字本身的高度时，文字会垂直居中对齐。
当行高小于文字本身的高度时，文字会按照基线对齐。
需要注意的是，行高也会对行框的高度产生影响。当行高大于文字本身的高度时，行框的高度会根据行高进行扩展。
以下示例演示了line-height对文字垂直对齐的影响：
/* 垂直居中对齐 */
h2 {
line-height: 40px;
}
/* 基线对齐 */
h3 {
line-height: 20px;
}
5. line-height与文本换行
line-height还与文本的换行方式有关。当一行文字的宽度超过了容器的宽度时，浏览器会根据line-height进行文本的换行。
默认情况下，浏览器会自动根据单词和标点符号进行换行，以保证文本的可读性。
我们可以通过以下属性来控制文本的换行方式：
word-break: 控制非CJK字符的换行方式，包括normal、break-all、keep-all等值。
overflow-wrap: 控制文本的自动换行方式，包括normal、break-word等值。
p {
word-break: break-all;
overflow-wrap: break-word;
}
6. 行间距与段落间距的设置
通过line-height属性，我们还可以设置行间距和段落间距。
行间距指的是行框之间的垂直空白区域，而段落间距指的是段落之间的垂直空白区域。
我们可以通过设置具体的行高数值来控制行间距和段落间距的大小：
/* 设置行间距为30像素 */
p {
line-height: 30px;
}
/* 设置段落间距为2倍行高 */
p + p {
line-height: 2;
}
结论
line-height属性在CSS中扮演着重要的角色，它不仅仅是设置行高，还影响了文字在行内的垂直对齐方式。通过合理地使用line-height属性，我们可以优化网页排版，改善用户阅读体验。