CSS逻辑属性与逻辑值

逻辑属性与逻辑值规范为 CSS 中的许多属性和值引入了相对于流的对应关系。

为何需要逻辑属性？

传统CSS根据实体尺度属性设置尺寸，例如一个块级盒子具有width、height，元素定位、内外边距、边框等按照方向划分为top、right、bottom、left等等。

实体属性在更改了书写模式（writing-mode）情况下，就无法适用了。如：把writing-mode改为vertical-rl就会变为：宽高比显然是不符合的。

如果使用逻辑属性（将width改为inline-size），就会变为：这样无论何种书写模式都是正常的。

逻辑属性和逻辑规范定义了这些实体值到逻辑值的对应关系，如：

在对齐元素时，诸如弹性盒和网格布局等新的 CSS 布局方法所用的概念是块向（block）和行向（inline），而非右侧（right）和左侧（left），或者上侧（top）和下侧（bottom）。

行向是指在所用的书写模式中，一行文本延伸的方向。因此在从左到右横排的英文文档，或者从右到左横排的阿拉伯文文档中，行向为_水平方向_。若切换至竖排书写模式（如日文文档）则行向变为_竖直方向_，这是因为文本在这种书写模式中竖直延伸。

块向是指另一方向，即块——例如段落——依次显示的方向。在英文和阿拉伯文中，块沿竖直方向依次排列，而块在任意竖排书写模式中沿水平方向依次排列。

下图展示了横排书写模式中的行向和块向：

此图展示了竖排书写模式中的块向与行向：

还有一些简写属性可以用于让我们同时设置盒子块向或者行向的两侧。这些简写属性没有等价的实体属性。

属性	用途
`border-block`	为两个块向边框设置 `border-color`、`border-style` 和 `border-width`。
`border-block-color`	为两个块向边框设置 `border-color`。
`border-block-style`	为两个块向边框设置 `border-style`。
`border-block-width`	为两个块向边框设置 `border-width`。
`border-inline`	为两个行向边框设置 `border-color`、`border-style` 和 `border-width`。
`border-inline-color`	为两个行向边框设置 `border-color`。
`border-inline-style`	为两个行向边框设置 `border-style`。
`border-inline-width`	为两个行向边框设置 `border-width`。
`margin-block`	设置所有块向外边距（`margin`）。
`margin-inline`	设置所有行向外边距（`margin`）。
`padding-block`	设置块向内边距（`padding`）。
`padding-inline`	设置行向内边距（`padding`）。

除了这些有对应关系的属性，另有可以处理块向和行向尺度的简写属性。除 inset 属性外，这些属性没有与实体属性的对应关系。