逻辑属性

CSS **逻辑属性** 提供了一种根据文档的书写模式和方向而不是视窗的物理尺寸来布局内容的方式。这使得设计更加灵活和易于维护，尤其是对于支持多种语言的网站。

而 **物理属性**，例如 **top**、**right**、**padding-bottom** 和 **border-bottom-left-radius**，是根据物理方向定义位置和特征，并引用元素的特定侧面，而逻辑属性如 **inset-block-start**、**inset-inline-end**、**padding-block-end** 和 **border-end-end-radius** 使用相对于块轴和内联轴上内容流的逻辑方向关键字。

块方向

**块轴** 指的是定义块布局中元素堆叠顺序的轴。它本质上是内容块（例如段落（**<p>**）、标题和 div（**<div>**））在网页上布局的方向。这也称为 **块方向**。在从左到右和从右到左的语言中，块方向是内容流的垂直方向，从上到下。

**块开始** 和 **块结束** 方向分别代表沿着块轴的内容的 **开始边缘** 和 **结束边缘**，或者说是 “从” 和 “到” 方向，其中 **block-start** 等于水平书写模式下的 **top**，而 **block-end** 等于水平书写模式下的 **bottom**。

内联方向

**内联轴** 垂直于块轴。内联轴表示内联内容（如文本）在块内流动的方向。这也称为 **内联方向**。在从左到右的书写模式（如英语）中，内联方向是水平的，从左到右。在从右到左的语言（如阿拉伯语和希伯来语）中，内联方向是水平的，从右到左。

**内联开始** 和 **内联结束** 分别代表沿着内联轴的内容的 **开始边缘** 和 **结束边缘**，**inline-start** 和 **inline-end** 的值和属性在水平书写模式下等效于 **left** 和 **right** 属性和值。哪些等效于 **right** 或 **left** 取决于书写方向 - 例如，**inline-start** 在从左到右的语言中为 **left**，而在从右到左的语言中为 **right**。

另请参阅