必须用 inline-size/block-size 替代 width/height，并同步替换所有 margin/padding/border 的物理方向变体，才能使盒模型真正响应 writing-mode 和 dir；混用会导致 rtl 或竖排布局错位。
直接用 inline-size 和 block-size 替代 width 与 height，并同步改写所有 margin/padding/border 的物理方向变体，才能让盒模型真正响应 writing-mode 和 dir——否则哪怕只漏一个 margin-left，整个 RTL 或竖排布局就可能错位。
为什么 width/height 在 vertical-rl 下会“反着算”
浏览器对 width 和 height 的解释始终绑定物理轴：设了 writing-mode: vertical-rl 后，width 仍被当作“水平方向尺寸”，但此时“水平”在视觉上已是上下；height 反而控制文字流的横向宽度。结果就是：
-
width: 200px; padding: 10px; box-sizing: border-box在vertical-rl下，10pxpadding会撑开上下空间，而非左右 -
height: 100px实际限制的是卡片的“视觉宽度”，和阅读习惯完全脱节 - DevTools 显示的“computed”值是物理结果，看不出你写的逻辑语义是否被正确解析
哪些属性必须成对替换，不能只换一半
逻辑属性不是加个前缀就能用，它要求盒模型定义体系整体切换。混用物理和逻辑属性会导致计算错乱，尤其在嵌套或 flex/grid 容器中：
-
width→ 必须配inline-size，height→ 必须配block-size -
margin-top/margin-bottom→margin-block-start/margin-block-end -
padding-left/padding-right→padding-inline-start/padding-inline-end -
border-top/border-bottom→border-block-start/border-block-end - 简写优先用
margin-block、padding-inline、border-block，避免单边覆盖失效
Safari 15.6 及更早版本的 box-sizing 兼容性陷阱
box-sizing: border-box 对逻辑尺寸的支持不一致：Chrome 105+、Firefox 100+、Safari 16.4+ 支持完整联动；但 Safari 15.6 及更早会忽略 border-inline 和 padding-inline，导致 inline-size 计算偏小。
- 防御写法：用
@supports (inline-size: 100px)包裹逻辑规则，并提供width/height回退 - 不要在 flex 容器里对子项单独设
inline-size来“微调宽度”——它可能被flex-basis覆盖，应优先用min-inline-size或flex-basis -
dir属性没设，margin-inline-start就是摆设；lang不能替代dir，它只影响字体、断行、引号
真正麻烦的不是写错一个 padding-inline，而是写了十个 margin-left 后，发现只要改 dir 就全得重测——逻辑属性的价值不在语法新潮，而在把方向耦合从样式层彻底抽离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
