inset-block 是 CSS 逻辑属性，用于控制块级方向（垂直方向）偏移，等价于同时设置 inset-block-start 和 inset-block-end，仅对 position: absolute/fixed/sticky 元素生效，不兼容旧版 Safari/Firefox，且不能单独替代 top/bottom 实现单边控制。
inset-block 是什么，它能替代 top/bottom 吗
inset-block 是 CSS 逻辑属性中用于控制块级方向（垂直方向）偏移的简写，对应物理方向的 top 和 bottom。但它不是简单替换——它只在 position: absolute、fixed 或 sticky 元素上生效，且必须配合 inset-inline 或具体逻辑边（如 inset-block-start）才能形成完整定位。
常见错误是单独写 inset-block: 1rem; 就以为能固定上下边距，其实它等价于：inset-block-start: 1rem; inset-block-end: 1rem;。如果你只想控制顶部（比如贴顶），该用 inset-block-start: 0;，而不是 inset-block: 0;。
-
inset-block: 1rem→ 上下各 1rem -
inset-block: 1rem 2rem→inset-block-start: 1rem; inset-block-end: 2rem; - 不支持单边省略：不能写
inset-block: 0 auto（auto在inset-block中无效，仅inset简写支持auto） - 当
writing-mode: vertical-rl时，inset-block-start实际作用于“物理顶部”，但inset-block的语义仍指块级起始/结束，不随视觉旋转而翻转含义
为什么用 inset-block 而不是 top/bottom 做国际化定位
因为 top/bottom 是物理方向，硬编码后在 RTL（direction: rtl）或垂直书写（writing-mode: vertical-rl）下不会自动调整；而 inset-block-start 始终代表“块级起始侧”——在水平文档中是顶部，在垂直文档中是右侧（取决于 writing-mode 和 direction 的组合）。
真正起作用的是底层逻辑模型：block 轴始终垂直于文本行流动方向（inline 轴）。所以当你把一个弹窗固定在页面“顶部”，用 inset-block-start: 1rem 比 top: 1rem 更可靠：
立即学习“前端免费学习笔记（深入）”；
- 在
dir="ltr"+writing-mode: horizontal-tb下，inset-block-start=top - 在
dir="rtl"+writing-mode: horizontal-tb下，inset-block-start仍是top（方向不影响块轴） - 在
writing-mode: vertical-rl下，inset-block-start指向“物理右侧”，即内容块的起始边缘
也就是说：inset-block 天然适配多书写模式，不需要额外写 [dir="rtl"] .modal { top: 1rem; } 这类 hack。
inset-block 和父容器 transform / contain 冲突怎么办
当父元素设置了 transform、contain: layout 或 will-change: transform 时，inset-block 的计算可能被截断或失效——浏览器会把该父容器当作新的 containing block，但逻辑偏移量有时无法正确映射到变换后的坐标系中。
这不是 bug，而是规范未完全覆盖的边界行为。此时最稳妥的 fallback 方案是退回到显式逻辑边声明 + margin-block-start 辅助判断：
- 优先用
inset-block-start: 0;+inset-inline-start: 1rem;替代inset-block: 0; - 若仍异常，改用
top: 0;并配合[dir="rtl"]或[writing-mode]媒体查询兜底 - 避免在
transform容器内做全向拉伸（如inset: 0），改用width: 100%; height: 100%+margin-block: 0;
什么时候不该用 inset-block
不是所有垂直偏移场景都适合 inset-block。它只对已定位元素有效，且语义上强调“相对于包含块的块级方向偏移”。以下情况建议绕开：
- 需要动态 JS 读取偏移值：CSSOM 中
inset-block不可直接 getComputedStyle 获取（返回空字符串），必须查inset-block-start和inset-block-end - 与 transition 配合时：部分浏览器对
inset-block的过渡支持不稳定，推荐拆成inset-block-start单独过渡 - 兼容性要求覆盖 Safari ≤ 15.4 或 Firefox ≤ 96：这些版本不支持
inset-block，需提供top/bottom回退 - 元素本身是
position: relative且仅需微调位置（比如上移 2px）：此时top: -2px更直观，inset-block-start: -2px显得冗余
真正发挥价值的点在于：你明确在构建支持 RTL 或垂直书写的系统级 UI 组件，并且定位逻辑需要随 writing-mode 自动翻转——这时候 inset-block 不是“可选项”，而是避免样式泄漏的关键隔离层。
