直接用inline-size和block-size替代width、height并配合box-sizing: border-box，才能使盒模型真正适配不同书写方向；混用物理属性会导致尺寸计算错乱，尤其在vertical-rl下width控制垂直方向、height控制水平方向，引发布局崩塌。
直接用 inline-size 和 block-size 替代 width、height，配合 box-sizing: border-box，才能让盒模型真正适配不同书写方向；只换 margin 类属性而不动尺寸定义，依然会翻车。
为什么 width/height 在 vertical-rl 下会“反着算”
浏览器对 width 和 height 的解释始终基于物理轴：即使设了 writing-mode: vertical-rl，width 仍被当作水平方向尺寸处理，但此时“水平”已变成视觉上的上下方向。结果就是 padding 和 border 被错误地加在垂直方向上，导致实际尺寸远超预期。
-
width: 200px+padding: 10px+box-sizing: border-box在 vertical-rl 下，10px padding 会撑开上下空间，而非左右 -
height: 100px反而控制的是文字流的“横向宽度”，和阅读习惯完全脱节 - 这种错位在 horizontal-tb 下不暴露，一到竖排或 RTL+vertical 场景就立刻崩
inline-size / block-size 怎么用才不踩坑
inline-size 对应文字流方向（LTR/RTL 是水平流，vertical-rl 是垂直流），block-size 始终垂直于它。二者和 box-sizing 联动时，padding-inline 和 border-inline 才会被正确包含进尺寸计算。
- 必须成对替换：
width→inline-size，height→block-size，不能混用 -
box-sizing: border-box对逻辑尺寸有效，但 Safari ≤15.6 会忽略border-inline，需加@supports降级 - 不要在 flex 或 grid 容器里对子项单独设
inline-size来“微调宽度”——它可能被主轴尺寸覆盖，优先用flex-basis或min-inline-size
dir 属性没设，logical properties 就是摆设
margin-inline-start 或 text-align: start 这些属性依赖文档根节点的 dir 值（或局部 direction）才能知道哪边是“start”。没有 dir="rtl"，它们就默认按 LTR 解析，阿拉伯语页面照样左对齐、左外边距。
-
是底线要求，lang不能替代dir - 嵌入的 LTR 片段（如 URL、代码块）必须用
<bdo dir="ltr">...</bdo>或dir="ltr"显式包裹，否则双向算法失效 - JS 动态插入内容后，若未同步设置
dir，margin-inline-end等属性不会重生效，得手动触发重排（例如改style.opacity）
真正麻烦的不是写错一个 padding-inline，而是写了十个 margin-left 后，发现只要改 dir 就全得重测——逻辑属性的价值不在语法新潮，而在把方向耦合从样式层彻底抽离。但抽离的前提，是整个渲染链路（HTML 结构、CSS 属性、JS 行为）都承认并尊重 dir 的权威性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
