CSS - inset 属性

上一页
下一页

CSS 的inset 属性用于控制元素相对于其包含块的位置。它是一个简写属性，用于在一个语句中为 top、right、bottom 和/或 left 属性定义值。为了使该属性生效，必须声明 position 属性。

语法

inset: auto | length | percentage | initial | inherit;

属性值

值 描述
auto 根据元素的内容或其他布局因素确定元素的大小。默认值。
length 使用长度单位（例如 px、em、rem 等）设置元素的内嵌距离。可以使用负值。
percentage 使用相对于其父容器的百分比值设置元素的内嵌距离。
initial 将属性设置为其默认值。
inherit 从父元素继承该属性。

CSS Inset 属性示例

以下示例说明了使用不同值的inset 属性。

使用 Auto 值的 Inset 属性

为了让浏览器根据元素的默认行为或其他因素计算定位，我们使用auto 值。此值通常用于根据元素包含块的边缘对齐元素的位置。以下示例演示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .text {
         position: absolute;
         inset: auto;
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: auto
   </h4>
   <div class="container">
      <p class="text">
         TutorialsPoint offers extensive online tutorials
         and courses on various tech topics, including 
         programming, web development, and data science.
      </p>
   </div>
</body>

</html>

使用长度值的 Inset 属性

为了设置元素的位置，我们可以使用长度单位（例如 px、rem、em 等）。inset 属性最多接受四个值。根据提供的数值，相应的边将受到影响。以下示例演示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
      }

      .one-val {
         inset: 15px;
      }

      .two-val {
         inset: 15px 40px;
      }

      .three-val {
         inset: 15px 35px 45px;
      }

      .four-val {
         inset: 15px 25px 35px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 15px (all four sides
      have 15px distance)
   </h4>
   <div class="container">
      <p class="values one-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 40px (top and bottom have 
      15px distance while left and right 
      have 40px distance)
   </h4>
   <div class="container">
      <p class=" values two-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 35px 45px (top has 15px 
      distance, left and right have 35px 
      distance and bottom has 45px distance)
   </h4>
   <div class="container">
      <p class=" values three-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 15px 25px 35px 45px (top has 15px 
      distance, right has 25px distance, bottom 
      has 35px distance and left has 45px distance)
   </h4>
   <div class="container">
      <p class=" values four-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

使用百分比值的 Inset 属性

为了设置元素的位置，我们可以使用百分比值（例如 5%、10% 等）。inset 属性最多接受四个值。根据提供的数值，相应的边将受到影响。以下示例演示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
      }

      .one-val {
         inset: 15%;
      }

      .two-val {
         inset: 5% 15%;
      }

      .three-val {
         inset: 5% 25% 15%;
      }

      .four-val {
         inset: 5% 25% 30% 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 15% (all four sides have 
      15% distance of the container)
   </h4>
   <div class="container">
      <p class="values one-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
   </div>
   <h4>
      inset: 5% 15% (top and bottom have 
      5% distance while left and right 
      have 15% distance of the container)
   </h4>
   <div class="container">
      <p class=" values two-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 5% 15% 25% (top has 5% distance, 
      left and right have 15% distance and 
      bottom has 25% distance of the container)
   </h4>
   <div class="container">
      <p class=" values three-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
   <h4>
      inset: 5% 25% 30% 15% (top has 5% distance, 
      right has 25% distance, bottom has 30% 
      distance and left has 15% distance of 
      the container)
   </h4>
   <div class="container">
      <p class=" values four-val">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

使用混合值的 Inset 属性

为了设置元素的位置，我们可以结合使用长度单位（例如 px、rem、em 等）和百分比值（例如 10%、20% 等）。inset 属性最多接受四个值。根据提供的数值，相应的边将受到影响。以下示例演示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 350px;
         height: 200px;
         border: 3px solid green;
         position: relative;
      }

      .values {
         position: absolute;
         background-color: lightgreen;
         inset: 25px 10% 15px 35%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset property
   </h2>
   <h4>
      inset: 25px 10% 15px 35% (top has 25px distance, 
      right has 10% distance from the container, bottom 
      has 15px distance and left has 35% distance from 
      the container)
   </h4>
   <div class="container">
      <p class="values">
      TutorialsPoint offers extensive online tutorials
      and courses on various tech topics, including 
      programming, web development, and data science.
      </p>
   </div>
</body>

</html>

注意：inset 属性接受不同数量的参数，因此根据提供的数值，相应的边将受到影响。

  • 一个值：它将距离均匀地应用于所有四个边。
  • 两个值：第一个值提供顶部和底部的距离，第二个值提供左侧和右侧的距离。
  • 三个值：第一个值提供顶部边缘的距离，第二个值提供左侧和右侧边缘的距离，第三个值提供底部边缘的距离。
  • 四个值：第一个值提供顶部边缘的距离，第二个值提供右侧边缘的距离，第三个值提供底部边缘的距离，第四个值提供左侧边缘的距离。

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
inset 88.0 88.0 66.0 14.1 73.0
css_properties_reference.htm
打印页面
上一页
下一页
广告