理解逻辑属性和值

Desknumber

CSS 逻辑属性和值还没有完全准备好使用，但是了解它们可以帮助您理解 CSS 布局以及与书写模式的交互。过去，CSS 将自身与物理尺寸和方向联系在一起，将元素的位置物理映射到左侧、右侧、顶部和底部。我们float一个元素left或，我们right使用定位偏移属性top、left和bottom。right我们将边距、填充和边框设置为margin-top和padding-left。如果您以水平、从上到下、从左到右的书写模式和方向工作，这些物理属性和值就有意义。

如果您使用垂直书写模式，无论是对于整个布局还是对于某些元素，它们就没有意义。在本文中，我将解释 CSS 如何进行更改以支持书写模式，在此过程中，我将澄清一些可能让您对 Flexbox 和 Grid 感到困惑的事情。

当我第一次开始使用 CSS Grid 并向人们解释 电子邮件营销列表 新规范时，我注意到该grid-area属性可以用作设置所有四行的单行简写。因此，下面的三个示例将导致相同的项目放置。第一个使用普通属性，第二个指定每个尺寸的起始线和结束线，第三个使用grid-area.



我（以及我的观众中的许多人）遇到的第一个问题是，“为什么这些不遵循我们在 CSS 中其他所有内容中习惯的上、右、下、左顺序？” 它们实际上以与这些值相反的顺序排列：上、左、下、右！CSS工作组是在积极地刁难事情吗？

答案是，这些值已经偏离了基本假设，即网络上的内容映射到屏幕的物理尺寸，句子的第一个单词位于其所在框的左上角grid-area。如果您从未遇到过我们以速记方式设置这些值的现有方式，那么这是完全有意义的。我们先设置两条起始线，然后设置两条结束线。

这意味着，如果我们将文档的书写模式更改为垂直模式，则块的位置仍然相对于文档的书写模式，而不是屏幕的物理属性。您可以在下面的示例中尝试此操作，切换布局的写入模式值并查看整个网格旋转。