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>

在这个示例中，.box 元素会从 .container 的边缘向外偏移不同的距离，部分区域会超出 .container 的边界。

3.关键点总结

inset 属性：用于同时设置 top、right、bottom 和 left 四个定位属性。
正值：元素从包含块的边缘向内偏移。
负值：元素从包含块的边缘向外偏移，可能超出包含块的边界。
使用场景：通过正值和负值的组合，灵活地控制元素相对于其包含块的位置，从而实现各种布局效果。可以更加简洁和方便地定位和调整元素的位置，使代码更易读和维护

4.注意事项

inset 属性只适用于定位元素（非 static 定位）。
如果元素没有固定宽高，元素会自适应调整宽和高来同时满足 top、right、bottom 和 left 这四个定位属性。
可以使用长度单位（如 px、em）或百分比值来设置 inset 属性的值。
浏览器对 inset 属性的支持是逐渐增加的，因此在使用时应考虑到浏览器兼容性。