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

概述逻辑属性（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_PropertiesMDN writing-mode 文档：https://developer.mozilla.org/docs/Web/CSS/writing-mode