前端 CSS 面试题, line-height: 100% 和 line-height: 1 有什么区别?
前端 CSS 面试题, line-height: 100% 和 line-height: 1 有什么区别?
QA
Step 1
Q:: line-height: 100% 和 line-height: 1 有什么区别？
A:: 这两个值主要区别在于它们的计算方式和实际表现。line-height: 100% 是基于元素的字体大小来计算的，表示的是当前元素字体大小的100%，即等于当前字体的大小。而 line-height: 1 是一个无单位值，表示字体大小的倍数，它不依赖于具体的字体大小。无单位的 line-height 更加通用，能够适应不同的字体大小和元素，保持一致的行高表现。因此，line-height: 1 更推荐使用，因为它在不同的上下文中更加一致和稳定。
Step 2
Q:: line-height 属性的最佳实践是什么？
A:: 最佳实践通常是使用无单位的 line-height 值，比如 line-height: 1.5，这样可以确保在不同的元素和上下文中行高的表现更加一致。无单位的 line-height 会继承并基于父元素的字体大小，而有单位的 line-height 则可能导致不一致的排版效果。
Step 3
Q:: 为什么在 CSS 中会使用 line-height？
A:: 在 CSS 中使用 line-height 是为了控制文本行与行之间的距离。这在多行文本的可读性和排版上起着重要作用。合理的 line-height 可以使文本更容易阅读，避免行与行之间的过度紧凑或过度分散。
Step 4
Q:: 如何在 CSS 中垂直居中文本？
A:: 通过设置 line-height 等于元素高度可以实现单行文本的垂直居中，比如：如果一个元素的高度是 50px，设置 line-height: 50px 可以让单行文本垂直居中。此外，可以使用 flexbox 布局来垂直居中文本，使用 display: flex; align-items: center; 来实现。