定位:inset-block / inset-inline 与 inset
定位元素(position 不为 static)的偏移也有逻辑版:inset-block-start / inset-block-end / inset-inline-start / inset-inline-end,以及简写 inset-block / inset-inline。另有把四边一次写完的
inset(语法同 margin,1–4 个值),但它是 top / right / bottom / left 的物理简写,取值按物理四边解析,不随书写模式变化。下面只给盒子设 inset-block-start 与 inset-inline-start(另两边留
auto),它就锚在「block × inline 的起始角」;翻转书写方向,看这个角在物理四角之间迁移。
1 · 起始角锚定
定位到内容起始角。 弹层、徽标、关闭按钮通常应贴在内容的起始角,而非固定的左上角。inset-block-start 与 inset-inline-start 的组合在 horizontal-tb 下:ltr 为左上,rtl 自动变右上,镜像布局无需另写一套偏移。
2 · inline 轴的过约束[over-constrained]
盒子的两端 inset 与 inline-size 同时非 auto 时,inline 轴的定位方程无解,此时 end 一侧的 inset 被丢弃;而两条 margin 为 auto 时,富余空间先由 margin 吸收,方程仍有解。
inline-size(120px / auto)与 margin-inline(0 / auto),观察两条 inset 是否都生效。读数为包含块 padding edge 到盒子 border box 的距离,即该侧 inset 与 margin 之和。
过约束[over-constrained]规则不变。 过约束按轴判定:某条轴的两端 inset 与该轴尺寸同时非 auto 时,该轴的定位方程无解(如 inset-inline-start、inset-inline-end、inline-size 三者齐全),即为过约束。此时按 CSS 定位规则,start
一侧的 inset 生效、end 一侧被忽略——与物理定位中「ltr 取 left、忽略 right」是同一条规则,只是参照系换成了逻辑轴。
前提是该轴的两条 margin 非 auto。margin 为 auto 时富余空间先由 margin 吸收,方程有解,不进入 over-constrained 分支——inset: 0 + margin: auto 的居中即由此而来。