有用速记的逻辑属性

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 错误.

直接链接 →