css逻辑属性要求width/height必须替换为inline-size/block-size，margin/padding/border需按inline/block轴向成对改写，并配合writing-mode、dir及@supports降级，否则在vertical-rl或rtl下尺寸与方向全错。
必须成对替换 width/height 和 margin/padding/border 的物理写法，否则在 vertical-rl 或 dir="rtl" 下会立即崩塌——不是“不生效”，而是尺寸和方向全算错。
width/height 必须换成 inline-size/block-size
width 和 height 是物理轴绑定的：即使写了 writing-mode: vertical-rl，width 仍被解释为“水平方向尺寸”，而此时视觉上的“水平”是上下，结果 padding-left 实际撑开的是顶部和底部，元素总高度远超预期。
-
width: 200px→ 改为inline-size: 200px（文字流方向主尺寸） -
height: 100px→ 改为block-size: 100px（垂直于文字流的方向） - 务必同步设
box-sizing: border-box，否则padding-inline和border-inline不会被包含进尺寸计算 - Safari ≤15.6 会忽略
border-inline对inline-size的影响，建议用@supports (inline-size: 100px)包裹并提供width/height回退
margin/padding/border 要按轴向分组替换
不能只换 margin-left 却留着 padding-top——逻辑属性的语义依赖 axis 对齐。内联轴（inline）控制文字流方向间距，块轴（block）控制堆叠方向间距，混用会导致某一边距在 RTL 下失效、另一边距在 vertical-rl 下反向撑开。
- 沿文本流方向的间距（如按钮组水平间隙）→ 用
margin-inline-start/margin-inline - 垂直堆叠方向的间距（如段落上下空隙）→ 用
margin-block-start/margin-block - 内边距同理：
padding-inline: 16px替代padding-left+padding-right；padding-block: 12px替代padding-top+padding-bottom - 边框也需对应：
border-inline-start、border-block-end，简写border-inline: 1px solid会同时作用于起始和结束边
dir 和 writing-mode 是逻辑属性生效的前提
margin-inline-start 不是“自动识别语言”，它只看当前元素或最近父级的 direction 和 writing-mode。没设 dir="rtl"，它就永远按 LTR 解析，阿拉伯语页面照样左对齐、左外边距。
- 根节点必须显式声明：
或动态注入dir="rtl"，lang属性无效 - 嵌入的 LTR 片段（如 URL、代码块）必须用
<bdo dir="ltr"></bdo>或dir="ltr"显式包裹，否则双向算法失效 - JS 动态插入内容后，若未同步设置
dir，margin-inline-end等不会重生效，可触发重排（例如临时改style.opacity = 0.99再改回） - 不要在 flex 容器子项上单独设
inline-size微调宽度——它常被flex-basis覆盖，优先用min-inline-size或flex-basis
@supports 降级不是可选项，是必选项
IE 完全不支持逻辑属性，旧版 Safari（≤15.6）对 border-inline + box-sizing 联动有 bug，EdgeHTML 内核静默回退到 width。靠 PostCSS 自动补全不可靠，手动控制更稳。
- 用
@supports (margin-block: 0)包裹整套逻辑规则 - 在外层写物理 fallback：
margin: 0; margin-left: 16px;，再在@supports块里覆盖为margin-inline-start: 16px - 避免在同一声明块混用物理与逻辑属性，比如
margin: 0; margin-inline-start: 16px—— 后者在不支持浏览器中被忽略，前者会生效，但语义已错 -
border-radius没有稳定逻辑版本，border-start-start-radius是实验性属性，Safari 不支持，生产环境别用
真正麻烦的不是写错一个 padding-inline，而是写了十个 margin-left 后，发现只要改 dir 就全得重测。逻辑属性的价值不在语法新潮，而在把方向耦合从样式层彻底抽离——但前提是整套盒模型定义体系同步切换，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
