1. 什么是行高(line-height)
在CSS中，行高(line-height)是指行框中的文本行之间的垂直间距。它定义了在行框中垂直方向上的空间分配，即文本行的高度。行高可以指定为一个无单位的数字、百分数或具体的长度值。
行高常用的取值有：
无单位的数字: 行高为字体大小的倍数。
百分数: 行高为字体大小的百分比。
具体的长度值: 行高为固定的像素值或其他长度单位。
行高可以影响到文本行的布局和显示效果，合理地设置行高可以改善文本的可读性、美观性和可访问性。
2. 设置行高的方法
2.1 使用无单位的数字
p {
line-height: 1.5;
}
这个例子中，行高被设置为字体大小的1.5倍。这样可以使文本行之间留有适当的间距，提高可读性。
2.2 使用百分数
h2 {
font-size: 18px;
line-height: 150%;
}
在这个例子中，行高被设置为字体大小的150%。如果字体大小为18px，实际的行高为18px * 150% = 27px。这种设置方法可以用于响应式设计中，使行高根据文本大小自动调整。
2.3 使用具体的长度值
h3 {
font-size: 24px;
line-height: 30px;
}
在这个例子中，行高被设置为固定的像素值30px。这种设置方法可以用于需要精确控制行高的布局需求。
3. 行高的影响
3.1 行高对文本垂直对齐的影响
如果文本中包含多行文字，行高的设置会影响到文本的垂直对齐方式。
p {
line-height: 1.5;
vertical-align: middle;
}
通过设置行高为1.5倍及vertical-align属性为middle，可以使多行文字在垂直方向上居中对齐。
3.2 行高与文本换行的关系
对于包含较长文本的容器，如果行高过小，可能会导致文本溢出容器边界。
p {
line-height: 1;
overflow: hidden;
}
在上述例子中，行高被设置为无单位的数字1，这将使文本行非常紧凑。如果文本内容超过了容器的宽度，将会溢出隐藏。
4. 行高的其他用途
4.1 创建垂直居中的容器
.container {
line-height: 200px;
text-align: center;
border: 1px solid #333;
}
在这个例子中，通过设置容器的高度和行高相等，可以实现容器中内容垂直居中的效果。这在创建水平居中且高度未知的块级元素时非常有用。
4.2 调整行高以适应图标
.icon {
font-family: "Font Awesome";
font-size: 18px;
line-height: 1;
}
在使用字体图标时，可以根据图标的设计来调整行高，使其与文字内容垂直对齐。通过设置行高为1，可以确保字体图标的垂直居中显示。
5. 总结
通过合理地设置行高属性，我们可以改善文本的可读性、美观性和可访问性。行高的设置方法包括使用无单位的数字、百分数和具体的长度值。行高还会影响文本的垂直对齐方式和换行情况。另外，行高还可以用于创建垂直居中的容器和调整行高以适应特定的图标。
在设计和开发中，合理使用行高属性，可以提升用户体验和界面的整体效果。