为什么 CSS 中的 line-height 应该是无单位的?

我经常听说 line-height 应该始终是无单位的。在我早期的编码年代,我没有过多地质疑这一点,但最近我开始想知道为什么会这样。在我看来,1.5 和 1.5em 应该产生相同的结果,对吧?事实证明,它们并非如此。

两者之间有一个细微的区别,这与 line-height 是一个继承属性有关。无单位值将按原样继承,这意味着实际值将为每个元素重新计算,并考虑元素的 font-size。然而,带有任何单位的 line-height 将被计算一次,然后作为固定值继承。这可能导致完全不同的结果,特别是如果声明在 body 元素或类似的元素中。

说到 body 元素,在那里将基础 line-height 定义为无单位值可能是一个好主意,以最小化重复:

body {line-height: 1.5;
}

那么,带单位的 line-height 是否被禁止,我们是否应该始终使用无单位值?不一定。诸如代码库约定、设计系统和个人偏好等因素在这里发挥作用。例如,使用无单位的 line-height 值维护精确、完美的垂直节奏可能有点棘手。在这种情况下,使用带单位的 line-height 可能是一个好主意,但请记住保持一致以避免头痛。

兄弟元素淡出效果

在鼠标悬停时淡出兄弟元素。 使用 transition 来为 opacity 的变化设置动画。

使用 :hover 和 :not 伪类选择器将除鼠标悬停元素之外的所有元素的 op