CSS 属性

CSS 属性 inset 是其他 CSS 属性 top、right、bottom或left.简写

它遵循与 margin CSS 属性相同的多值语法。

inset 属性指定物理偏移量，与元素的书写模式、方向和文本方向无关。

属性值

CSS 属性 inset 采用与元素相同的一组值left CSS属性，如下:

  • <length>: 可以指定负值、空值或正值。

  • <percentage>: 容器宽度的百分比。

  • auto: 默认值。浏览器计算左侧位置。

  • inherit: 指定与从其父元素计算得出的值相同的值。

适用范围

所有定位元素。

语法

inset = <'top'>{1,4}  

/* <length> */
inset: 5px; /* 应用于所有边的值 */
inset: 5px 10px; /* top/bottom left/right */
inset: 3px 5px 8px; /* top left/right bottom */
inset: 3.4em 5em 4em 4em; /* top right bottom left */
   
/* <percentage>包含块的宽度（left/right）或高度（top/bottom）的百分比 */
inset: 15% 10% 10% 10%;
   
/* 关键字 */
inset: auto;

CSS inset: 四个长度值

以下示例演示了 inset 属性与传递给它的四个长度值，决定了上、右、下、左偏移值。

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 45px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset: 4个值</span>
   </div>
</body>
</html>

CSS inset: 三个长度值

下面的示例演示了 inset 属性的使用传递给它的三个长度值，决定了上、右、下、左偏移值。

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px 15px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset: 3 个值</span>
   </div>
</body>
</html>

CSS inset: 两个长度值

下面的示例演示了 inset 的使用属性传递有两个长度值，用于确定顶部、右侧、底部和左侧偏移值。

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25px 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset: 2 个值</span>
   </div>
</body>
</html>

CSS inset: 一个值

以下示例演示了如何使用inset 属性，仅传递一个长度值，该长度值确定顶部、右侧、底部和左侧偏移值。

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 35px;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset: 1 个值</span>
   </div>
</body>
</html>

CSS inset: 百分比值

以下示例演示了如何使用inset 属性，传递给它两个百分比值，它确定顶部、右侧、底部和左侧偏移值。

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 25% 35%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset: 2 % 百分比</span>
   </div>
</body>
</html>

CSS inset: 混合值

以下示例演示了使用具有混合值的 inset 属性，即一个长度和另一个作为传递给它的百分比值，这确定了顶部、右侧、底部和左侧偏移值。

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: sideways-rl;
      position: absolute;
      inset: 0.25em 10%;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset: 混合值</span>
   </div>
</body>
</html>

CSS inset: auto 

以下示例演示了如何使用 inset 属性，并将 auto 值传递给它，该属性确定顶部、右侧、底部和左侧偏移值。

<html>
<head>
<style>
   div {
      background-color: green;
      width: 180px;
      height: 120px;
      position: relative;
   }

   .inset-ex {
      writing-mode: vertical-lr;
      position: absolute;
      inset: auto;
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">Inset: auto</span>
   </div>
</body>
</html>

CSS inset: 相关属性

下表列出了 CSS inset 的所有相关属性:

属性说明
bottom设置底部定位元素的垂直位置。
left设置左侧定位元素的水平位置。
right设置右侧定位元素的水平位置。
top设置顶部定位元素的垂直位置。
margin设置元素边距的简写。
inset-block指定逻辑块开始和结束元素的偏移量。
inset-inline指定元素在内联方向上的逻辑块起始和结束偏移。