像 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 |