CSS 逻辑属性与 writing-mode：双向布局与国际化

---

title: CSS 逻辑属性与 writing-mode：双向布局与国际化

keywords:

• writing-mode
• 逻辑属性
• margin-inline
• padding-block
• inset-inline

description: 阐述 writing-mode 与逻辑属性的协作，使用 inline/block 维度替代物理方向，适配从左到右/从右到左与纵向书写，实现更健壮的国际化布局。

categories:

• 文章资讯
• 编程技术

---

概述

逻辑属性（inline/block 轴）取代物理方向（left/right/top/bottom），与 writing-mode/direction 协作适配不同语言与书写模式，提升布局的国际化与可维护性。

示例

.card { padding-block: 12px; margin-inline: 16px }
.overlay { inset-inline: 0; inset-block-start: 0 }
/* 纵向书写示例 */
.vertical { writing-mode: vertical-rl }

工程建议

• 优先逻辑属性：尽量使用 margin/padding/inset 的逻辑版本；减少媒体与语言特例。
• 方向适配：与 dir="rtl" 与 writing-mode 测试；为图标与箭头提供镜像处理。
• 可访问性：保持阅读顺序与焦点移动一致性；避免仅靠方向视觉表达。

参考与验证

• MDN 逻辑属性文档：https://developer.mozilla.org/docs/Web/CSS/CSS_Logical_Properties
• MDN writing-mode 文档：https://developer.mozilla.org/docs/Web/CSS/writing-mode