inset属性不支持单值自动展开，必须用1–4个值按top/right/bottom/left顺序显式书写；正确写法为inset:20px 10px或inset:20px 10px 30px 15px，单值inset:20px无效。
inset 属性不支持像 margin 那样用单个值自动展开
直接写 inset: 10px 不会等效于 inset-top: 10px; inset-right: 10px; inset-bottom: 10px; inset-left: 10px —— 浏览器会报错或忽略。CSS inset 是一个**简写属性，但只接受 1–4 个值的逻辑顺序（top right bottom left），且不支持“单值自动复制”语法**。
正确写法：用 4 值或 2 值语法显式指定
必须按 inset: <top><right><bottom><left></left></bottom></right></top> 顺序提供值，浏览器才识别：
-
inset: 20px 10px 30px 15px→ 分别对应 top/right/bottom/left -
inset: 20px 10px→ 等价于inset: 20px 10px 20px 10px（上下同、左右同） -
inset: 20px→ ❌ 无效；这不是标准简写行为，当前所有浏览器均不支持
替代方案：用 inset-block / inset-inline 拆分逻辑轴
如果目标是响应式布局或适配书写方向（比如从左到右 vs 从右到左），更推荐用逻辑方位属性：
-
inset-block: 20px→ 同时设inset-top和inset-bottom -
inset-inline: 10px→ 同时设inset-left和inset-right（在 RTL 下自动翻转） - 组合使用：
inset-block: 20px; inset-inline: 10px效果接近传统margin: 20px 10px的语义
注意：inset-block 和 inset-inline 是独立属性，不能合并进 inset 简写中。
立即学习“前端免费学习笔记（深入）”；
兼容性与常见错误
inset 是 position: absolute/fixed/sticky 元素的逻辑偏移替代方案，但存在几个易踩坑点：
- Firefox 63+、Chrome 89+、Safari 14.1+ 支持；IE 完全不支持
- 若同时写了
top和inset-top，后者会覆盖前者（同名逻辑属性优先级更高） - 用
inset: auto时，浏览器可能表现不一致（尤其在 flex/grid 容器中），建议显式设值 - 不要指望它像
padding那样接受inset: 1em / 2这类除法语法 —— CSS 规范没定义这种用法
真正要“简写四个方向”，只能老老实实写四值或两值；想省事又保逻辑语义，就分开用 inset-block 和 inset-inline —— 别绕开规范去猜浏览器会不会通融。
