CSS中inset属性详细讲解

CSS 中的 inset 属性是一种用于定位和调整非 static 定位元素的缩略属性。它是四个单独属性的简写,这些属性是 toprightbottomleft。通过 inset 属性,可以同时设置这些属性的值,简化代码书写。

1.属性语法

inset 属性的语法如下:

/* 单个值 */
inset:  | ;

/* 两个值 */
inset:  |   | ;

/* 三个值 */
inset:  |   |   | ;

/* 四个值 */
inset:  |   |   |   | ;
①单个值

当提供一个值时,这个值会同时应用于 toprightbottomleft

.element {
    inset: 10px;
    /* 等同于 */
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
}
②两个值

当提供两个值时,第一个值会应用于 topbottom,第二个值会应用于 rightleft

.element {
    inset: 10px 20px;
    /* 等同于 */
    top: 10px;
    right: 20px;
    bottom: 10px;
    left: 20px;
}
③三个值

当提供三个值时,第一个值应用于 top,第二个值应用于 rightleft,第三个值应用于 bottom

.element {
    inset: 10px 20px 30px;
    /* 等同于 */
    top: 10px;
    right: 20px;
    bottom: 30px;
    left: 20px;
}
④四个值

当提供四个值时,这些值会依次应用于 toprightbottomleft

.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 Exampletitle>
    <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 属性设置了四个不同的偏移量,这些偏移量分别应用于 toprightbottomleft

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 Valuestitle>
    <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 Valuestitle>
    <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 属性:用于同时设置 toprightbottomleft 四个定位属性。
  • 正值:元素从包含块的边缘向内偏移。
  • 负值:元素从包含块的边缘向外偏移,可能超出包含块的边界。
  • 使用场景:通过正值和负值的组合,灵活地控制元素相对于其包含块的位置,从而实现各种布局效果。可以更加简洁和方便地定位和调整元素的位置,使代码更易读和维护

4.注意事项

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

你可能感兴趣的:(css,前端)