inline-size仅在writing-mode或dir明确设定文字流方向时生效，horizontal-tb下等价width，vertical-rl下映射height；混用物理属性会覆盖逻辑属性，且box-sizing对inline-size的支持存在浏览器兼容性差异，需整套替换逻辑属性并加@supports回退。
inline-size 不是 width 的简单别名，它必须和 writing-mode、box-sizing、padding-inline 等逻辑属性协同工作，否则尺寸会错乱甚至被浏览器静默忽略。
inline-size 什么时候生效？
它只在元素有明确文字流方向时才有语义：horizontal-tb（默认）、vertical-rl、vertical-lr 或 RTL 文本环境。如果没设 writing-mode 或 dir，inline-size 行为等同于 width，但一旦切换书写模式，它的映射关系就变了：
- horizontal-tb 下：
inline-size→ 水平方向（即传统 width） - vertical-rl 下：
inline-size→ 垂直方向（即传统 height） - 混用
width: 200px和inline-size: 300px会导致后者被覆盖或无效
为什么 inline-size + box-sizing: border-box 容易出错？
不是所有浏览器都把 border-inline 和 padding-inline 算进 inline-size 的总尺寸里：
- Chrome 105+、Firefox 100+、Safari 16.4+：支持完整联动，
inline-size: 300px包含padding-inline: 10px和border-inline: 2px - Safari ≤15.6：忽略
border-inline，实际尺寸 =inline-size−padding-inline，比预期小 - 旧版 Edge（EdgeHTML）：完全不识别
inline-size，直接回退到width - 必须用
@supports (inline-size: 100px)包裹规则，并提供width/height回退
如何安全地替换 width/height 为逻辑尺寸？
不能只改一个属性——必须整套切换，否则盒模型计算立刻失准：
- 用
inline-size替代width，用block-size替代height - 用
padding-inline替代padding-left/padding-right，用padding-block替代padding-top/padding-bottom - 用
border-inline替代border-left/border-right，用border-block替代border-top/border-bottom - 确保父容器或根节点设置了
dir="ltr"或dir="rtl"，否则start/end类逻辑值无法解析 - 避免在 flex 容器中对子项单独设
inline-size—— 它可能被flex-basis覆盖，优先用min-inline-size或flex-basis
最易被忽略的一点：逻辑属性不是“局部替换”，而是一套语义体系。只要漏掉一个 padding-left 或写错一个 dir，整个盒模型的尺寸推导就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
