CSS 属性

CSS 属性 inset-block 确定元素的逻辑块开始和结束偏移量。这取决于元素的 writing-mode、direction和text-orientation 它与物理偏移的 top和bottom，或left 和 right CSS 属性相关。

它是inset-block-end 和 inset-block-start CSS 属性的简写属性。

属性值

CSS 属性 inset-block 采用与CSS left属性相同的值集 ，如下:

  • <length>: 可以指定负数， null 或正值。

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

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

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

适用范围

所有定位元素。

语法

inset-block = <'top'>{1,2}  

/* <length> */
inset-block: 5px 10px;
inset-block: 5px; /* value applied to start and end */
inset-block: 3.4em 5em;
   
/* <percentage> */
inset-block: 15% 10%;
   
/* 关键字 */
inset-block: auto;

CSS inset-block: 设置偏移量

以下示例演示了 inset-block  属性的使用，传递给它两个长度值，这决定了开始和结束偏移值。

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

   .inset-ex {
      text-orientation: sideways-right;
      direction: rtl;
      position: absolute;
      inset-block: 25px 45px;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-block</span>
   </div>
</body>
</html>

CSS inset-block: 百分比值

以下示例演示了 inset-block 属性的使用，传递给它的两个百分比值，用于确定开始和结束偏移值。写入模式设置为horizontal-tb。

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

   .inset-ex {
      writing-mode: horizontal-tb;
      position: absolute;
      inset: 20% 10%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-block</span>
   </div>
</body>
</html>

CSS inset-block: 混合值

下面的示例演示了混合值（长度和百分比）的inset-block属性的使用) 传递给它，它确定开始和结束偏移值。写入模式也设置为vertical-lr。

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

   .inset-ex {
      writing-mode: vertical-lr;
      position: absolute;
      inset-block: 25px 45%;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-block</span>
   </div>
</body>
</html>

CSS inset-block: auto Value

以下示例演示如何使用 inset-block 属性，并将 auto 作为传递给的值它决定了开始和结束偏移值。书写模式也设置为horizontal-tb。

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

   .inset-ex {
      writing-mode: horizontal-tb;
      position: absolute;
      inset-block: auto;
      background-color: pink;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-block</span>
   </div>
</body>
</html>

CSS inset-block: 相关属性

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

属性描述
bottom设置底部定位元素的垂直位置。
left 设置左侧定位元素的水平位置。
right设置右侧定位元素的水平位置。
top设置顶部定位元素的垂直位置。
inset设置元素的物理偏移。
inset-block-end定义元素的逻辑块结束偏移。
inset-block-start定义元素的逻辑块起始偏移量。
writing-mode设置文本行是水平显示还是水平显示
direction设置文本方向从左到右或从右到左。
text-orientation设置一行中文本字符的方向。