Css 简明教程

CSS - inset

CSS 属性 inset 是其他 CSS 属性 * top, right, bottom,* 和/或 * left* 的简写。

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

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

Possible Values

CSS 属性 inset 采用与 left CSS 属性相同的取值，如下所示：

<length> − 可以指定负值、零值或正值。
<percentage> − 容器宽度的百分比。
auto − 默认值。浏览器计算左位置。
inherit − 指定与其父元素计算得出的相同值。

Applies To

所有定位元素。

Syntax

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

/* <length> values */
inset: 5px; /* value applied to all edges */
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>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 15% 10% 10% 10%;

/* Keyword value */
inset: auto;

CSS inset - Four Length Values

以下示例演示了将 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 values</span>
   </div>
</body>
</html>

CSS inset - Three Length Values

以下示例演示了将 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 values</span>
   </div>
</body>
</html>

CSS inset - Two Length Values

以下示例演示了将 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 values</span>
   </div>
</body>
</html>

CSS inset - One Length Value

以下示例演示了将 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 value</span>
   </div>
</body>
</html>

CSS inset - Percentage Value

以下示例演示了将 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 % values</span>
   </div>
</body>
</html>

CSS inset - Mixed Values

以下示例演示了将 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 - mixed values</span>
   </div>
</body>
</html>

CSS inset - auto Value

以下示例演示了将 inset 属性与传递给它的自动值一起使用，这些值确定顶部、右侧、底部和左侧的偏移值。

<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>