inset: 0 是逻辑方位简写属性，等价于 top/right/bottom/left: 0 但不依赖 writing-mode 或 direction；需配合 position: absolute 且父容器必须为定位上下文（非 static），否则无效。
inset: 0 是什么，它和 top/left/bottom/right=0 有什么区别
inset: 0 是 CSS Logical Properties 中的简写属性，等价于 top: 0; right: 0; bottom: 0; left: 0，但关键区别在于：它**不依赖书写方向（writing-mode）或文本方向（direction）**。在从右向左（RTL）布局或垂直书写模式下，inset 仍能按逻辑方位正确映射，而直接写 left: 0 可能在 RTL 下变成“右边”。不过对于绝大多数 LTR 水平文档，视觉效果一致。
实际使用中，inset: 0 更简洁、语义更清晰——就是“贴满四边”，且现代浏览器支持良好（Chrome 87+、Firefox 63+、Safari 14.1+），Edge 也已全面支持。
必须配合 position: absolute 才生效，且父容器要有定位上下文
inset: 0 只对 position: absolute（或 fixed）元素起作用；它不会让 static 或 relative 元素撑开空间。更重要的是：父容器**必须是定位上下文（containing block）**，即其 position 值不能是 static（默认值）。
常见错误是只写了子元素样式，却忘了给父容器加 position: relative：
<div class="parent"> <div class="child"></div> </div>
对应 CSS 必须包含：
- 父容器：
.parent { position: relative; }（或absolute/fixed） - 子元素：
.child { position: absolute; inset: 0; }
漏掉 position: relative，子元素会相对于最近的定位祖先（可能是 body）定位，而不是你期望的父容器。
撑满 ≠ 内容可交互/可滚动，注意 overflow 和 z-index
用 inset: 0 撑满后，子元素尺寸确实填满父容器，但以下两点极易被忽略：
- 如果子元素内部内容超出（比如长文本、图片），而父容器没设
overflow，内容会溢出不可见；需要显式加overflow: auto或hidden控制裁剪或滚动 - 多个
absolute子元素会堆叠，z-index 不设时按 HTML 顺序层叠；若希望某子元素盖在最上，必须设z-index: 1（或更高），仅靠inset: 0不影响层叠顺序 - 父容器若本身有 padding，
inset: 0的子元素会紧贴父容器 content box 边缘，不会自动避开 padding —— 如需“撑满内边距区域”，得改用width: 100%; height: 100%并配合box-sizing: border-box
替代方案对比：width/height 100% vs inset: 0
有人用 width: 100%; height: 100% 实现类似效果，但它依赖父容器有明确高度（比如设置了 height: 200px），而 inset: 0 在父容器高度由内容撑开时依然有效（只要父容器是定位上下文）。
但要注意：inset: 0 对 flex 或 grid 容器内的子元素无效（因为它们不是定位上下文），此时应优先用布局本身的能力（如 flex: 1 或 grid-area）。
真正需要 inset: 0 的典型场景是：遮罩层、全屏卡片、背景图层、编辑器浮层面板——这些都需要脱离文档流、精确贴边、且不干扰父容器原始布局流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
