CSS 属性

CSS 属性 inset-inline-start 确定元素的逻辑内联起始插入。这取决于元素的 writing-mode、direction和text-orientation 它与物理偏移的 top和bottom，或left 和 right CSS 属性相关。

属性值

CSS 属性 inset-inline-start 采用与 left CSS 属性相同的值集，如下所示:

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

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

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

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

适用范围

所有定位元素。

语法

inset-inline-start = auto | <length-percentage> 

/* <length> 长度值 */
inset-inline-start: 5px;
inset-inline-start: 3.4em;
   
/* <percentage>包含块的宽度或高度的百分比 */
inset-inline-start: 15%;
   
/* 关键字 */
inset-inline-start: auto;

CSS inset-inline-start: 设置偏移量

以下示例演示了使用inset-inline-start 属性，传递给它的长度值，用于确定内联起始偏移值。

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

   .inset-ex {
      writing-mode: horizontal-tb;
      position: absolute;
      inset-inline-start: 50px;
      background-color: cornsilk;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-inline-start</span>
   </div>
</body>
</html>

CSS inset-inline-start: 百分比值

以下示例演示使用 inset-inline-start 属性并传递给它的百分比值，该值确定内联起始偏移值。写入模式设置为horizontal-tb。

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

   .inset-ex {
      writing-mode: horizontal-tb;
      position: absolute;
      inset-inline-start: 30%;
      background-color: cornsilk;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-inline-start</span>
   </div>
</body>
</html>

CSS inset-inline-start: 方向

下面的示例演示了inset-inline-start属性与写入的使用-模式为vertical-lr，文本方向为rtl。

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

   .inset-ex {
      writing-mode: vertical-lr;
      direction: rtl;
      position: absolute;
      inset-inline-start: 1.5em;
      background-color: cornsilk;
   }
</style>
</head>
<body>
   <div>
      <span class="inset-ex">inset-inline-start</span>
   </div>
</body>
</html>

CSS inset-inline-start: auto 

以下示例演示了 inset-inline-start 属性与auto 作为传递给它的值，它确定内联起始偏移值。写入模式也设置为horizontal-tb。

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

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