逻辑属性用于实用简写

Michelle Barker 写了一篇我最喜欢的博客文章：简短、实用，并为您节省时间提供了宝贵的知识。在这里，她深入探讨了 CSS 中逻辑属性的简写，特别是那些仅在一个轴上设置长度的简写，例如仅在块（垂直）轴或仅在内联（水平）轴上设置长度。

我之所以说“块”和“内联”，是因为就逻辑属性而言，x 轴可以根据当前的writing-mode表现得像垂直轴。

因此，我们一直都有padding、margin和border简写，它们可以支持多值语法，但它们都不允许我们在不设置另一个轴上的长度的情况下，在特定轴上声明长度。

例如

/* This gives us margin on the inline axis */
margin: 0 3rem;

…但我们必须设置另一个轴才能实现这一点。然而，借助逻辑属性，我们为每个轴提供了额外的简写，这意味着我们可以使用margin-inline简写来专门处理内联轴。

margin-inline: 3rem;

Michelle 在顺便提到了我最喜欢的逻辑属性简写。您定位某个元素到这种样式的频率有多高？

.position-me {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

我们可以用inset: 0将这四行代码合并起来。或者，我们可以分别使用inset-block和inset-inline直接定位块轴和内联轴。

在谈论简写时，我总是想提醒大家注意“意外”的 CSS 重置。这只是我犯的常见 CSS 错误之一。

直链 →