前端 CSS 面试题, 说说你对 line-height 的理解及其赋值方式

Step 1

Q:: 什么是line-height，它的作用是什么？

A:: line-height 是 CSS 中用来设置行间距的属性。它决定了行框的高度，并影响行内文本的垂直对齐方式。通过调整 line-height，可以控制文本的可读性和布局的视觉效果。line-height 的值可以是数字、百分比、长度单位（如 px, em）或者 'normal'。

Step 2

Q:: line-height 的不同赋值方式及其效果是什么？

A:: line-height 可以通过多种方式赋值： 1. 纯数字：例如，line-height: 1.5; 表示行高是字体大小的 1.5 倍。 2. 百分比：例如，line-height: 150%; 表示行高是字体大小的 150%。 3. 长度单位：例如，line-height: 24px; 表示行高是固定的 24 像素。 4. 'normal'：这是默认值，具体值由浏览器决定，通常约为字体大小的 1.2 倍。

Step 3

Q:: line-height 与 vertical-align 的区别和联系是什么？

A:: line-height 用于设置行的高度，而 vertical-align 用于设置行内元素的垂直对齐。两者可以配合使用来控制文本在行内的垂直位置。例如，较高的 line-height 可以与 vertical-align: middle 结合，使文本在行中间对齐。

Step 4

Q:: line-height 是否会继承，继承时会发生什么？

A:: line-height 是一个可继承属性，这意味着子元素会继承父元素的 line-height 值。如果父元素设置了 line-height，子元素的行高默认也会根据该值计算，但子元素的字体大小会影响最终的行高。

Step 5

Q:: line-height 的最佳实践有哪些？

A:: 在设计中使用 line-height 时，建议避免使用具体的像素值，尤其是在响应式设计中。推荐使用相对单位（如倍数或百分比）来确保文本在不同的屏幕尺寸下都有合适的行间距。此外，通常建议将 line-height 设置为字体大小的 1.4 到 1.6 倍，以确保良好的可读性。