必须替换width→inline-size、height→block-size、margin-top→margin-block-start、padding-left→padding-inline-start、border-bottom→border-block-end等物理属性，才能使盒模型真正适配不同书写与文本方向；混用会导致尺寸错乱或布局崩塌。
Logical properties 本身不能“实现一套代码适配全球化盒模型”，它只是让同一套 CSS 更容易按书写方向（writing-mode）和文本方向（direction）自动调整盒模型行为——前提是你得放弃 margin-top、padding-left 这类物理属性，改用逻辑等价写法。
哪些属性必须替换成 logical 版本？
不是所有物理属性都有直接逻辑对应，但盒模型核心四边（margin/padding/border）和尺寸（width/height）都有明确映射。替换不全会导致部分方向下样式错乱。
-
margin-top→margin-block-start（块轴起始，对应 top 或 right，取决于 writing-mode） -
padding-left→padding-inline-start（内联轴起始，对应 left 或 top） -
border-bottom→border-block-end -
width/height→ 优先用inline-size/block-size（尤其在 vertical-rl 场景下）
注意：border-radius 没有标准 logical 版本，border-start-start-radius 等属实验性属性，Chrome/Firefox 支持但 Safari 不支持，生产环境慎用。
writing-mode 和 direction 如何影响逻辑属性的实际渲染？
逻辑属性的计算结果取决于元素自身的 writing-mode（决定块轴方向）和 direction（决定内联轴起始）。两者共同决定 block-start 到底是上、下还是右。
-
writing-mode: horizontal-tb+direction: ltr：margin-block-start=margin-top -
writing-mode: vertical-rl+direction: ltr：margin-block-start=margin-right（块轴此时是水平向右） -
writing-mode: vertical-lr+direction: rtl：padding-inline-start=padding-right（内联轴起始被 direction 反转）
别依赖浏览器 DevTools 显示的“computed”值来判断逻辑属性是否生效——它显示的是最终物理值，看不出你写的逻辑语义是否被正确解析。
如何安全地渐进式迁移到 logical properties？
直接全局替换风险高，尤其当项目混用第三方组件或 legacy CSS 时。推荐分层策略：
- 新组件强制使用 logical 属性，同时设置
direction和writing-mode的显式继承链（例如根元素设direction: ltr，避免依赖 UA 默认） - 对已有组件，先用
@supports (margin-block: 0)包裹逻辑属性，降级回物理写法（注意：IE 完全不支持，Edge 16+ 才开始支持） - 避免在同一个声明块里混用物理和逻辑属性，比如
margin: 0; margin-block-start: 1rem会触发未定义行为 - 测试重点不是“是否渲染”，而是“在
direction: rtl+writing-mode: vertical-rl下 margin 是否压到正确一侧”
最易忽略的一点：flex/grid 的 justify-content 和 align-items 是逻辑友好的，但 text-align 仍基于 direction，不是 writing-mode——它始终对齐内联轴起始，这点常被误认为“也该用 logical”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
