CSS 中的 inset 属性是一种用于定位和调整非 static 定位元素的缩略属性。它是四个单独属性的简写，这些属性是 top、right、bottom 和 left。通过 inset 属性，可以同时设置这些属性的值，简化代码书写。
1.属性语法
inset 属性的语法如下：
/* 单个值 */
inset: <length> | <percentage>;
/* 两个值 */
inset: <length> | <percentage> <length> | <percentage>;
/* 三个值 */
inset: <length> | <percentage> <length> | <percentage> <length> | <percentage>;
/* 四个值 */
inset: <length> | <percentage> <length> | <percentage> <length> | <percentage> <length> | <percentage>;
①单个值
当提供一个值时，这个值会同时应用于 top、right、bottom 和 left。
.element {
inset: 10px;
/* 等同于 */
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
②两个值
当提供两个值时，第一个值会应用于 top 和 bottom，第二个值会应用于 right 和 left。
.element {
inset: 10px 20px;
/* 等同于 */
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;
}
③三个值
当提供三个值时，第一个值应用于 top，第二个值应用于 right 和 left，第三个值应用于 bottom。
.element {
inset: 10px 20px 30px;
/* 等同于 */
top: 10px;
right: 20px;
bottom: 30px;
left: 20px;
}
④四个值
当提供四个值时，这些值会依次应用于 top、right、bottom 和 left。
.element {
inset: 10px 20px 30px 40px;
/* 等同于 */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}
⑤使用示例
以下是一个使用 inset 属性的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Example</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.box {
position: absolute;
inset: 10px 20px 30px 40px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
在这个示例中，.box 元素被定位在 .container 元素内部，且它的 inset 属性设置了四个不同的偏移量，这些偏移量分别应用于 top、right、bottom 和 left。
2.正值和负值的区别
①正值
正值使元素从包含块的边缘向内偏移，即距离包含块的边缘更远。
.element {
inset: 10px 20px 30px 40px;
}
top: 10px：从顶部向下偏移 10 像素
right: 20px：从右边向左偏移 20 像素
bottom: 30px：从底部向上偏移 30 像素
left: 40px：从左边向右偏移 40 像素
②负值
负值使元素从包含块的边缘向外偏移，即超出包含块的边缘。
.element {
inset: -10px -20px -30px -40px;
}
top: -10px：从顶部向上偏移 10 像素
right: -20px：从右边向右偏移 20 像素
bottom: -30px：从底部向下偏移 30 像素
left: -40px：从左边向左偏移 40 像素
③示例代码
使用正值的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Positive Values</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.box {
position: absolute;
inset: 10px 20px 30px 40px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
在这个示例中，.box 元素会从 .container 的边缘向内偏移不同的距离，整体位于 .container 内部。
使用负值的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inset Negative Values</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.box {
position: absolute;
inset: -10px -20px -30px -40px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
在这个示例中，.box 元素会从 .container 的边缘向外偏移不同的距离，部分区域会超出 .container 的边界。
3.关键点总结
inset 属性：用于同时设置 top、right、bottom 和 left 四个定位属性。
正值：元素从包含块的边缘向内偏移。
负值：元素从包含块的边缘向外偏移，可能超出包含块的边界。
使用场景：通过正值和负值的组合，灵活地控制元素相对于其包含块的位置，从而实现各种布局效果。可以更加简洁和方便地定位和调整元素的位置，使代码更易读和维护
4.注意事项
inset 属性只适用于定位元素（非 static 定位）。
如果元素没有固定宽高，元素会自适应调整宽和高来同时满足 top、right、bottom 和 left 这四个定位属性。
可以使用长度单位（如 px、em）或百分比值来设置 inset 属性的值。
浏览器对 inset 属性的支持是逐渐增加的，因此在使用时应考虑到浏览器兼容性。