CSS - inset-block 属性

CSS inset-block 属性确定元素与其父容器在块方向上的距离。它取决于元素的书写模式、方向和文本方向。它是inset-block-start和inset-block-end属性的简写属性。position属性必须定义才能使该属性显示其效果。

语法

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

属性值

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

CSS inset-block 属性示例

以下示例解释了使用不同值的 inset-block 属性。

使用 auto 值的 inset-block 属性

要允许浏览器根据其他 CSS 属性和应用于元素的布局规则确定块起始边或块结束边的适当偏移量，我们使用 auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

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

<body>
   <h2>
      CSS inset-block property
   </h2>
   <h4>
      inset-block: auto
   </h4>
   <div class="container">
      <div class="inner-box">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed
         from the block-start and block-end.
      </div>
   </div>
</body>

</html>

使用长度值的 inset-block 属性

要设置距包含块边缘的距离，我们可以使用长度单位（例如 px、em、rem 等）指定距离。最多可以给出两个值。单个值设置块起始和块结束距离。如果给出两个值，则第一个值设置块起始距离，第二个值设置块结束距离。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

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

      .inner-box1 {
         inset-block: 10px;
      }

      .inner-box2 {
         inset-block: 25px 50px;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-block property
   </h2>
   <h4>
      inset-block: 10px (Both block-start 
      and block-end distances are 10px)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed 
         from the block-start and block-end.
      </div>
   </div>
   <h4>
      inset-block: 25px 50px (block-start 
      distance is 25px and block-end distance
      is 50px)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed
         from the block-start and block-end.
      </div>
   </div>
</body>

</html>

使用百分比值的 inset-block 属性

要设置距包含块边缘的距离，我们可以使用百分比值（例如 10%）指定距离。最多可以给出两个值。单个值设置块起始和块结束距离。如果给出两个值，则第一个值设置块起始距离，第二个值设置块结束距离。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

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

      .inner-box1 {
         inset-block: 10%;
      }

      .inner-box2 {
         inset-block: 20% 50%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-block property
   </h2>
   <h4>
      inset-block: 10% (Both block-start 
      and block-end distances are 10% of 
      the container)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed 
         from the block-start and block-end.
      </div>
   </div>
   <h4>
      inset-block: 20% 50% (block-start distance
      is 20% and block-end distance is 50% of 
      he container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed 
         from the block-start and block-end.
      </div>
   </div>
</body>

</html>

使用混合值的 inset-block 属性

要设置距包含块边缘的距离，我们可以使用长度和百分比值的组合（例如 10px 20%）来指定距离。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

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

      .inner-box1 {
         inset-block: 10% 55px;
      }

      .inner-box2 {
         inset-block: 75px 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-block property
   </h2>
   <h4>
      inset-block: 10% 55px (block-start distance 
      is 10% of container and block-end distance 
      is 55px )
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed 
         from the block-start and block-end.
      </div>
   </div>
   <h4>
      inset-block: 75px 15% (block-start distance 
      is 75px and block-end distance is 15% of 
      the container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed 
         from the block-start and block-end.
      </div>
   </div>
</body>

</html>

使用书写模式的 inset-block 属性

inset-block 属性可以与 writing-mode 属性结合使用，该属性确定文本的方向。在水平模式下，它影响顶部和底部距离；在垂直模式下，它影响左侧和右侧距离。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 300px;
         width: 300px;
         position: relative;
      }

      .inner {
         position: absolute;
         background-color: lightgreen;
         inset-block: 30px 40px;
      }

      .inner-box1 {
         writing-mode: horizontal-lr;

      }

      .inner-box2 {
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-block property
   </h2>
   <h4>
      inset-block: 30px 40px ; 
      writing mode: horizontal-lr
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed 
         from the block-start and block-end.
      </div>
   </div>
   <h4>
      inset-block: 30px 40px ; 
      writing-mode: vertical-lr
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-block property. Observe 
         how the distance of this green area is changed 
         from the block-start and block-end.
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
inset-block	87.0	87.0	63.0	14.1	73.0

css_properties_reference.htm

打印页面