CSS 逻辑属性

定义

CSS 逻辑属性与值（Logical Properties and Values）是一套以「流方向」为参照的属性体系：不再使用 top/right/bottom/left 等物理方向，而以 block（块轴）与 inline（行内轴）的 start/end 描述位置，使布局自动适应不同书写模式。

对应关系

在横排左至右的语境下：

• margin-left 对应 margin-inline-start；
• width/height 对应 inline-size/block-size；
• border-top 对应 border-block-start；
• 定位属性有 inset-inline-start 等；文本对齐可用 text-align: start。

适用场景

当页面需支持阿拉伯语、希伯来语等从右向左（RTL）语言，或竖排的东亚传统排版（writing-mode: vertical-rl）时，逻辑属性写就的样式无需镜像改写即可正确呈现，大幅简化国际化样式维护。

现状

主流浏览器已全面支持常用逻辑属性，简写形式仍在完善。面向多语言市场的产品与组件库（配合 dir 属性与 :dir() 伪类）已将其作为默认书写方式。