CSS inset 是用于设置元素定位偏移的简写属性。本文介绍其基本语法、适用场景（如模态框、内嵌效果）及与 width/height 的关系，提升你的 CSS 布局效率。

inset 是 CSS 中一个非常实用的简写属性，用于同时设置元素的定位偏移值（top、right、bottom、left 四个方向的值），仅对定位元素生效（position 值为 relative、absolute、fixed 或 sticky 的元素）。

一、基本语法

inset: <top> <right> <bottom> <left>;

它的工作方式与 margin 或 padding 的简写类似：

1 个值：同时应用于四个方向

/* top=10px, right=10px, bottom=10px, left=10px */
inset: 10px;

2 个值：上下 / 左右

/* top=10px, right=20px, bottom=10px, left=20px */
inset: 10px 20px;

3 个值：上 / 左右 / 下

/* top=10px, right=20px, bottom=30px, left=20px */
inset: 10px 20px 30px;

4 个值：上 / 右 / 下 / 左（顺时针）

inset: 10px 20px 30px 40px;

二、与 top/right/bottom/left 的对应关系

inset 本质上就是这四个属性的简写：

.selector {
  inset: 10px 20px 30px 40px;
}

等价于：

.selector {
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
}

三、适用场景与效果

场景1：全屏覆盖

常见于模态框、遮罩层：

.overlay {
  position: fixed;
  inset: 0; /* 铺满整个视口 */
  background: rgba(0, 0, 0, 0.5);
}

场景2：相对父容器定位

.child {
  position: absolute;
  inset: 20px; /* 距离父容器各边20px，即在内侧20px处显示 */
}

场景3：配合 margin: auto 实现居中

.center-box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

这样会水平垂直居中，因为 inset: 0 让元素四边对齐到包含块边缘，再通过 margin: auto 平均分配剩余空间。

四、与 width/height 的关系

当同时设置 inset 与 width/height 时，需要注意以下两个规则：

规则一：宽度自动计算

如果 left 和 right 同时指定且 width 为 auto（不指定width，默认为 auto），宽度会根据包含块计算。

计算公式：width = 包含块宽度 - left - right。

规则二：过度约束下的忽略

如果 left、right 和 width 都指定，在常规流中 right 会被忽略（LTR情况下）。

计算公式：right = 包含块宽度 - left - width。

inset 让这种关系更直观：

.box {
  position: absolute;
  inset: 10px 20px 30px 40px;
  /* 此时宽度 = 包含块宽度 - 40px - 20px */
}

计算过程解析：

包含块：假设 .box 的某个祖先元素设置了 position: relative/absolute/fixed，那么这个祖先元素的内部区域（padding box）就是 .box 的包含块。我们假设祖先元素的宽度是 1000px。

inset 的作用：

• left: 40px，表示 .box 的左边缘距离包含块左边缘 40px

• right: 20px，表示 .box 的右边缘距离包含块右边缘 20px

因为没有设置 width，所以应用了规则一（left 和 right 同时指定，width 为 auto）。

宽度计算：

• 宽度 = 包含块宽度 - left - right

• 宽度 = 1000px - 40px - 20px = 940px

因此，最终 .box 元素的宽度被自动计算为 940px，它水平方向的位置也通过 left: 40px 和 right: 20px 被完全固定了下来。

核心概念：包含块

包含块是一个布局概念。对于绝对定位的元素，它的包含块是距离它最近的、设置了定位（非 static）的祖先元素的填充框（padding box）。如果没有这样的祖先，则包含块就是初始包含块（通常是视口/浏览器窗口）。

简单理解：包含块是绝对定位元素用来"参考"和"计算"尺寸的矩形区域。

五、注意事项

• 必须配合 position 使用，否则无效

• 支持负值（向外扩展）：

/* 元素向四周超出10px */
inset: -10px;

• 可以混合单位：

/* auto表示不改变该方向的默认定位 */
inset: 10% 20px 5vh auto;

• 当使用百分比时，水平方向参照的是包含块的宽度，垂直方向参照的是包含块的高度

六、浏览器支持

现代浏览器全面支持（包括 Chrome、Firefox、Edge、Safari）。如果需要兼容旧版浏览器（如 IE），需使用传统的 top/right/bottom/left。

七、实际应用示例

等距内嵌效果：

.card {
  position: relative;
  width: 300px;
  height: 200px;
}

.card-badge {
  position: absolute;
  inset: 15px 15px auto auto; /* 定位在右上角，距离上边和右边15px */
}

总结

inset 是一个更简洁、更直观的定位属性简写，特别适合需要设置多个方向偏移的场景。它能减少代码量，并且让"四边定位"的意图更明确。掌握后可以更高效地实现全屏覆盖、居中、等距内嵌等常见布局效果。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13656