行高（line-height）

在CSS中，`line-height` 属性用于设置文本的行高，即行与行之间的距离。这个属性对于调整文本的视觉效果和布局非常有用。下面是一个关于`line-height`属性的入门教程和知识点讲解，以及一个完整的示例代码。

### 知识点讲解

1. **定义和用法**：
   `line-height` 属性可以设置为具体的数值（以像素为单位），也可以设置为百分比。如果设置为百分比，则行高是字体大小的百分比。

2. **作用范围**：
   `line-height` 属性可以应用于几乎所有的CSS选择器，包括`body`、`div`、`p`、`span`等。

3. **影响元素高度**：
   `line-height` 会影响元素的高度，因为它是行高和行内元素高度的总和。如果行内元素的高度大于字体大小，则整个元素的高度会大于单行文本的高度。

4. **与字体大小和行内元素的相互作用**：
   如果设置了`font-size`，`line-height` 会以这个字体大小为基准。如果行内元素的高度大于字体大小，`line-height` 会以行内元素的高度为基准。

5. **与`vertical-align`的相互作用**：
   `line-height` 会影响`vertical-align`的计算，因为`vertical-align`是基于行高的。

### 示例代码

下面是一个简单的HTML和CSS示例，展示了`line-height`属性的使用：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Height Example</title>
<style>
  .normal-line-height {
    line-height: 1.5; /* 1.5 表示行高是字体大小的1.5倍 */
  }
  .larger-line-height {
    line-height: 2; /* 2 表示行高是字体大小的2倍 */
  }
  .custom-line-height {
    line-height: 150%; /* 150% 表示行高是字体大小的150% */
  }
</style>
</head>
<body>

<div class="normal-line-height">
  这是一段文本，行高是默认的1倍。
</div>

<div class="larger-line-height">
  这是一段文本，行高是2倍。
</div>

<div class="custom-line-height">
  这是一段文本，行高是150%。
</div>

</body>
</html>
```

在这个示例中，我们定义了三个不同的`line-height`值：

- `.normal-line-height` 使用默认的行高。
- `.larger-line-height` 使用2倍的字体大小作为行高。
- `.custom-line-height` 使用150%的字体大小作为行高。

当你运行这个示例时，你会看到不同的行高对文本布局的影响。

行高（line-height）

目录