【CSS 面经】对 line-height 的理解及其赋值方式

在 CSS 中，line-height 是一个重要的排版属性，用于控制文本行之间的距离。合理使用 line-height 能够优化文本的可读性和视觉效果，同时也是面试中的高频考点之一。本文将详细介绍 line-height 的含义、赋值方式及其应用场景。

一、line-height 的基本概念

什么是 line-height？

line-height 是指文本行高，定义了文本行框的高度，包括文字和行间的垂直间距。

• 行高的计算包括：
  • 文本的字体高度。
  • 文本上下的间距。
• 作用：
  • 提高文本的可读性。
  • 创建排版时的视觉平衡。

line-height 的组成部分

行高并不等同于文字本身的高度，它是由以下部分组成的：

• 字体高度：文字本身的实际高度。
• 上下间距：字体顶部和底部的额外空间，用于使文字之间有更好的间距。

line-height 的默认值

• 浏览器的默认 line-height 值通常是 normal。
• 对于大多数字体，normal 的行高大约是字体大小的 1.2 至 1.4 倍。

二、line-height 的赋值方式

line-height 属性支持多种赋值方式，每种方式适用于不同的场景。

1. 使用数值（无单位）

数值表示的是行高和字体大小的倍数关系。常见值为 1.5 或 2。

p {
  line-height: 1.5; /* 行高为字体大小的 1.5 倍 */
}

特点：

• 数值方式是继承性的，子元素的 line-height 会继承父元素的数值倍数。
• 推荐在响应式布局中使用。

2. 使用长度单位（px、em 等）

明确指定行高的长度。

p {
  line-height: 24px; /* 行高固定为 24 像素 */
}

特点：

• 不会随着字体大小的变化而改变。
• 常用于需要精确对齐的场景。

3. 使用百分比

百分比表示基于字体大小的比例。

p {
  line-height: 150%; /* 行高为字体大小的 1.5 倍 */
}

特点：

• 与无单位的数值类似，但通常不推荐，因为存在计算混淆的可能性。

4. 使用关键字（normal）

normal 是默认值，表示行高为字体大小的 1.2 至 1.4 倍。

p {
  line-height: normal; /* 默认行高 */
}

特点：

• 简单易用，但对复杂布局不够精确。

三、line-height 的继承特性

1. 继承行为

line-height 是继承属性，子元素会自动继承父元素的值。

示例：

body {
  font-size: 16px;
  line-height: 1.5;
}
p {
  /* 继承自 body 的 line-height 值，计算为 24px */
}

2. 数值 vs 单位继承

• 如果父元素的 line-height 使用数值（如 1.5），子元素继承的仍然是数值。
• 如果父元素使用单位值（如 24px），子元素继承的也是具体的像素值。

四、line-height 的应用场景

1. 提高文本可读性

使用 line-height 调整段落间距，可以提升文本的可读性，避免行间过于紧凑。

p {
  font-size: 16px;
  line-height: 1.8; /* 行间距较宽，适合长文阅读 */
}

2. 垂直居中

配合 height 和 line-height，可以实现单行文本的垂直居中。

.button {
  height: 40px;
  line-height: 40px; /* 行高等于高度 */
  text-align: center;
}

3. 响应式排版

使用无单位的 line-height，可以确保行高随着字体大小的变化自动调整。

body {
  font-size: 1em;
  line-height: 1.5;
}

五、常见面试问题及解答

1. 什么是 line-height？

答：line-height 是 CSS 属性，用于控制文本行之间的距离。其值可以是数值、长度单位、百分比或关键字。

2. 数值和单位赋值的区别是什么？

• 数值表示行高是字体大小的倍数，具有继承性。
• 单位值（如 px）是固定的，不会随字体大小变化。

3. 如何实现单行文本的垂直居中？

答：通过设置 height 和 line-height 相等，并结合 text-align: center，可以实现单行文本的垂直居中。

.center-text {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

4. 为什么使用无单位的 line-height？

答：无单位的 line-height 更灵活，适合响应式设计，因为子元素会继承比例而不是具体值。

推荐：

• JavaScript
• react
• vue

---