逻辑属性

流的概念

为了逻辑化布局，CSS 有流（ flow ）的概念：

可以用 Writing-mode 更改书写模式（比如书写方向）。

像 margin-top 等属性都是物理上的设置，不管在什么样的书写模式中，这些属性在视觉上始终一致。

而如果用基于流的属性（ margin-block-start ），则会与书写模式保持一致，即与逻辑保持一致。

举个例子：

.my-element {
    max-width: 150px;
    max-height: 100px;
}

可以改写为逻辑上的规则：

.my-element {
    max-inline-size: 150px;
    max-block-size: 100px;
}

另外的还有 block-start block-end inline-start inline-end 可以与 margin padding border inset 等搭配。

还有一些属性值支持逻辑布局，比如：

p {
    /* 而不是用 `right` 值 */
    text-align: end;
}