inline-size和block-size仅在writing-mode变化（如vertical-rl）时才真正改变行为：前者控文字流方向尺寸（如垂直高度），后者控块方向尺寸（如水平宽度）；默认horizontal-tb下与width/height等价，混用物理属性会破坏逻辑盒模型一致性。
inline-size 和 block-size 不是 width/height 的简单别名，它们只在真正需要响应 writing-mode（比如 vertical-rl）时才有实际意义。默认 horizontal-tb 下写 inline-size: 200px 和 width: 200px 效果完全一样，纯属多打字。
什么时候 inline-size 和 block-size 才真正改变行为
它们只响应 writing-mode，不响应 direction：
- 单独设 direction: rtl，block-size 仍等价于 height（块轴仍是垂直方向）
- 一旦设 writing-mode: vertical-rl，块轴立刻变成水平方向，此时：
• inline-size: 200px 控制的是元素“高度”（文字流向下）
• block-size: 80px 控制的是元素“宽度”（块方向向左）
- 子元素不会继承父级的 writing-mode 计算逻辑尺寸——它只看自身 writing-mode（默认 horizontal-tb）
必须成对替换，不能混用物理与逻辑属性
混用一个 padding-top 或 width 就会破坏逻辑盒模型的语义一致性：
- ✅ 正确搭配：inline-size + padding-inline + border-inline + box-sizing: border-box
- ❌ 错误写法：inline-size: 100px 同时写 padding-top: 8px —— 在 vertical-rl 下，padding-top 实际作用在右侧，视觉错位
- margin-block/margin-inline 同理，不能和 margin-left 混用
- border-radius 没有标准逻辑版本；border-start-start-radius 是实验性属性，Safari 不支持，生产环境慎用
box-sizing 对逻辑尺寸的支持有兼容性陷阱
box-sizing: border-box 确实影响 inline-size 和 block-size，但不同浏览器实现不一致：
- Chrome 105+、Firefox 100+、Safari 16.4+ 支持完整联动（inline-size 包含 padding-inline 和 border-inline）
- Safari ≤15.6 会忽略 border-inline，导致实际尺寸偏小
- 旧版 Edge（EdgeHTML）完全不支持，静默回退到 width
- 建议关键场景加防御：@supports (inline-size: 100px) 包裹逻辑规则，并为不支持者提供 width/height 回退
百分比、auto 和 min/max 行为容易被忽略
inline-size/block-size 的计算基准随块轴/内联轴动态变化：
- block-size: 50% 在 horizontal-tb 下是父高 × 50%，在 vertical-rl 下是父宽 × 50%
- inline-size: auto 在 Flex/Grid 中行为不稳定：Flex column 下可能被拉满容器高度，而 width: auto 仍按内容收缩
- min-inline-size/max-block-size 在 Safari ≤15.6 不支持，需回退为 min-width/max-height
- min-content/max-content 在 iOS 16.x Safari 中不支持（Safari 17.4+ 已修复）
真正落地 inline-size 和 block-size，不是全局搜索替换 width/height，而是先确认是否真有 vertical-rl 场景、是否已统一使用 writing-mode、是否连带改写了 padding-block 和 margin-block——漏掉任一环，逻辑尺寸就只是看起来高级，实际布局会出偏移、截断或响应异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
