CSS中inset属性详细讲解

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 lang="en">
<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 class="container"><div class="box"></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 lang="en">
<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 class="container"><div class="box"></div></div>
</body>
</html>

在这个示例中，.box 元素会从 .container 的边缘向内偏移不同的距离，整体位于 .container 内部。

使用负值的示例

<!DOCTYPE html>
<html lang="en">
<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 class="container"><div class="box"></div></div>
</body>
</html>