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

概述 逻辑属性（inline/block 轴）取代物理方向（left/right/top/bottom），与 `writing-mode`/`direction` 协作适配不同语言与书写模式，提升布局的国际化与可维护性。 示例 ```css .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