应使用 inline-size/block-size 替代 width/height，并配合 padding-inline/padding-block、border-inline/border-block，且需确保 box-sizing: border-box 在支持逻辑属性的浏览器中生效；混用物理与逻辑属性会破坏尺寸计算。
直接用 inline-size 和 block-size 替代 width 与 height，配合 padding-inline/padding-block、border-inline/border-block，再确保 box-sizing: border-box 生效——这才是真正适配书写模式的盒模型写法。硬套 width + writing-mode 只会尺寸错乱。
为什么 width/height 在 vertical-rl 下会“反着算”
当设置 writing-mode: vertical-rl 后，width 实际控制的是文字流方向（即垂直方向）的尺寸，height 控制的是水平方向；但 box-sizing: border-box 仍按物理轴计算：它把 padding-left 和 padding-right 当作左右内边距处理，而此时“左右”在视觉上已变成上下，导致内边距撑开错误方向。
常见错误现象：
- 设了
width: 200px; padding: 10px; box-sizing: border-box;，结果元素总高度远超 200px - 垂直排版下卡片宽度忽大忽小，调试时发现
padding值没变但视觉位置漂移
必须替换的四组逻辑属性及其映射关系
物理属性无法自动跟随 writing-mode 调整语义，必须显式改用逻辑属性：
-
width→inline-size（文字流方向的主尺寸） -
height→block-size（垂直于文字流的方向） -
padding-left/padding-right→padding-inline-start/padding-inline-end -
padding-top/padding-bottom→padding-block-start/padding-block-end
简写更推荐：padding-inline: 16px 等价于 padding-inline-start: 16px; padding-inline-end: 16px；border-block: 1px solid 自动覆盖起始和结束边框。
box-sizing 对 logical properties 的支持有兼容性陷阱
box-sizing: border-box 在逻辑属性上并非“开箱即用”，不同浏览器对 inline-size 是否包含 border-inline 和 padding-inline 的实现不一致：
- Chrome 105+、Firefox 100+、Safari 16.4+ 支持完整联动
- Safari 15.6 及更早版本中，
inline-size设为border-box时可能忽略border-inline，造成实际尺寸偏小 - 旧版 Edge（EdgeHTML 内核）完全不支持
inline-size作为box-sizing的基准，会静默回退到width
建议在关键场景加一层防御：用 @supports (inline-size: 100px) 包裹逻辑属性规则，并为不支持的浏览器提供 width/height 回退。
最易被忽略的一点：逻辑属性不是“加个前缀就完事”，它要求整个盒模型定义体系同步切换——只要混用一个 padding-left 或 width，就可能破坏 inline-size 与 padding-inline 的尺寸包含关系，最终让 box-sizing: border-box 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
