CSS inset 简写属性
CSS inset属性（top/right/bottom/left一次性设置）：inset:10px 20px 30px 40px、逻辑属性版本inset-inline/inset-block、与positioned元素absolute/fixed配合定位 · 难度：入门 · +10XP
CSS inset —— 一次性设置四个方向定位
当你给一个元素设置position:absolute或fixed时，需要同时指定top、right、bottom、left。inset属性可以一次性设置这四个值。
基本用法
/* 旧写法：四行 */
.modal-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
/* 新写法：一行！ */
.modal-overlay {
position: fixed;
inset: 0; /* 等于 top:0;right:0;bottom:0;left:0 */
}
简写规则
| 语法 | 等效于 |
|---|---|
| inset: 10px | 四个方向都是10px |
| inset: 10px 20px | 上下10px、左右20px |
| inset: 10px 20px 30px | 上10px、左右20px、下30px |
| inset: 10px 20px 30px 40px | 上10px、右20px、下30px、左40px |
规则和margin/padding的简写完全一样！
动手练习
- 基础练习：用inset写一个覆盖全屏的半透明遮罩层。
- 进阶应用：用inset做一个"图片放大预览"——点击图片后放大到距离屏幕四边各50px的位置。
- 项目实战：把项目中所有absolute/fixed元素的四方向定位改为inset简写。