CSS 逻辑属性

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

margin-left 这样的属性似乎相当合乎逻辑,但正如 Manuel Rego Casasnovas 所说

想象一下,您的网站上有一些从右到左 (RTL) 的内容,您的左侧可能就是实际的右侧,因此如果您通常为某些元素设置 margin-left: 100px,您可能希望将其替换为 margin-right: 100px

方向、书写模式,甚至 Flexbox 都有可能将事物颠倒过来,使属性不再那么合乎逻辑,并且比您希望的更难维护。现在我们将拥有 margin-inline-start 来解决这个问题。完整列表如下:

  • margin-{block,inline}-{start,end}
  • padding-{block,inline}-{start,end}
  • border-{block,inline}-{start,end}-{width,style,color}

Manuel 详细介绍了所有浏览器支持细节。

Rachel Andrew 还 解释了逻辑

… 这些值已经不再依赖于网络内容映射到屏幕物理尺寸的底层假设,即句子中的第一个词位于它所在的框的左上角。如果您从未遇到过我们以速记方式设置这些值的现有方法,那么网格区域中的行顺序就完全说得通了。

以下列出了逻辑属性,以及它们在默认情况下如何映射到现有的属性 从左到右 没有任何其他情况发生。

属性 逻辑属性
margin-top margin-block-start
margin-left margin-inline-start
margin-right margin-inline-end
margin-bottom margin-block-end
属性 逻辑属性
padding-top padding-block-start
padding-left padding-inline-start
padding-right padding-inline-end
padding-bottom padding-block-end
属性 逻辑属性
border-top{-size|style|color} border-block-start{-size|style|color}
border-left{-size|style|color} border-inline-start{-size|style|color}
border-right{-size|style|color} border-inline-end{-size|style|color}
border-bottom{-size|style|color} border-block-end{-size|style|color}
属性 逻辑属性
top inset-block-start
left inset-inline-start
right inset-inline-end
bottom inset-block-end

直接链接 →