可行但须整套切换逻辑属性，混用物理与逻辑属性会导致尺寸错乱；inline-size始终对应文字流方向，block-size垂直于它，且需同步替换padding、margin、border等全部相关属性。
直接用 inline-size 和 block-size 替代 width 与 height 是可行的，但必须整套切换盒模型属性，否则尺寸会错乱——混用物理和逻辑属性是当前最常踩的坑。
inline-size / block-size 怎么设才不被 writing-mode 带偏
它们不是“自动适配”的魔法开关，而是严格按书写模式定义方向：inline-size 始终对应文字流方向（LTR/RTL 是水平，writing-mode: vertical-rl 时就是垂直），block-size 则永远垂直于它。
- 设了
writing-mode: vertical-rl后，inline-size: 200px表示这个元素在垂直方向占 200px，视觉上是“高度” - 如果还保留
width: 200px，它在 vertical-rl 下实际控制的是水平尺寸（即视觉上的“宽度”），和inline-size完全不同轴，极易冲突 -
box-sizing: border-box对inline-size生效，但 Safari ≤15.6 会忽略border-inline，导致实际尺寸比预期小
padding / margin / border 必须同步逻辑化
只改尺寸、不改内边距或边框，等于只换轮胎不换刹车片——盒模型计算依然走物理路径，padding-inline 不会被计入 inline-size 的边界内。
- 必须成对替换：
padding-left→padding-inline-start，margin-top→margin-block-start，border-right→border-inline-end - 简写更安全：
padding-inline: 12px等价于padding-inline-start: 12px; padding-inline-end: 12px；border-block: 1px solid自动覆盖起始和结束边框 -
margin-inline-start这类属性依赖dir属性或direction才能知道哪边是 start；没设dir="rtl"，阿拉伯语页面照样按 LTR 解析，外边距还是加在左边
flex / grid 容器里别对子项单独设 inline-size
在 display: flex 或 display: grid 的容器中，子项的主轴尺寸由容器控制，inline-size 很可能被忽略或覆盖。
立即学习“前端免费学习笔记（深入）”；
- 想控制 flex 子项宽度，优先用
flex-basis或min-inline-size（后者更语义一致） -
grid-template-columns: 1fr inline-size(200px)是无效语法；列宽应写1fr 200px或用minmax(min-inline-size, max-inline-size)配合grid-template-columns的函数式写法（需注意浏览器支持） - 如果子项同时有
flex: 1和inline-size: 100px，Chrome 会以flex-basis为准，inline-size形同虚设
@supports + 回退是上线前必做的防御动作
逻辑属性不是“写了就跑”，尤其涉及 box-sizing 联动时，旧版 Safari 和 EdgeHTML 内核行为不一致，静默降级会导致布局偏移。
- 关键组件必须包裹：
@supports (inline-size: 100px) { .card { inline-size: 300px; block-size: 200px; } } - 回退规则写在
@supports外面，确保不支持的浏览器拿到width/height物理值 -
border-radius没有稳定标准的逻辑版本，border-start-start-radius属实验性属性，Safari 不支持，生产环境必须避免
最易被忽略的其实是“体系性”：逻辑属性不是加个前缀就能用，它要求从尺寸、内边距、边框、外边距到盒模型计算全部对齐同一套方向语义。少换一个 padding-left，整个 inline-size 就可能失效。
