CSS - inset-inline-end 属性



CSS inset-inline-end 属性设置元素末端与其父容器在内联方向上的距离。它取决于元素的书写模式方向文本方向position 属性必须定义才能使该属性显示其效果。

语法

inset-inline-end: auto | length | percentage | initial | inherit;  

属性值

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

CSS inset-inline-end 属性示例

以下示例说明了使用不同值的inset-inline-end 属性。

使用 auto 值的 inset-inline-end 属性

为了允许浏览器根据其他 CSS 属性和应用于元素的布局规则确定内联末端边缘的适当偏移量,我们使用auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      .inner-box {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
         inset-inline-end: auto;
      }
   </style>
</head>

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

</html>

使用长度值的 inset-inline-end 属性

要设置包含块的内联末端边缘的距离,我们可以使用长度单位(例如 px、em、rem 等)指定距离。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: 0;
      }

      .inner-box1 {
         inset-inline-end: 30px;
      }

      .inner-box2 {
         inset-inline-end: 6em;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline-end property
   </h2>
   <h4>
      inset-inline-end: 30px (The distance of the 
      end of the green area is 30px from the parent 
      container)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline-end property. Observe 
         how the distance of this green area is changed 
         from inline-end.
      </div>
   </div>
   <h4>
      inset-inline-end: 6em (The distance of the end 
      of the green area is 6em from the parent 
      container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline-end property. Observe 
         how the distance of this green area is changed 
         from inline-end.
      </div>
   </div>
</body>

</html>

使用百分比值的 inset-inline-end 属性

要设置包含块的内联末端边缘的距离,我们可以使用百分比值(例如 10%)指定距离。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: 0;
      }

      .inner-box1 {
         inset-inline-end: 20%;
      }

      .inner-box2 {
         inset-inline-end: 60%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline-end property
   </h2>
   <h4>
      inset-inline-end: 20% (The distance of the 
      end of the green area is 20% of the 
      container.)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline-end property. Observe 
         how the distance of this green area is changed 
         from inline-end.
      </div>
   </div>
   <h4>
      inset-inline-end: 60% (The distance of the end 
      of the green area is 60% of the container.)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline-end property. Observe 
         how the distance of this green area is changed 
         from inline-end.
      </div>
   </div>
</body>

</html>

使用书写模式的 inset-inline-end 属性

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

示例

<!DOCTYPE html>
<html>

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

      .inner {
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: 0;
         inset-inline-end: 50%;
      }

      .inner-box1 {
         height: 100%;
         writing-mode: horizontal-lr;

      }

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

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

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
inset-inline-end 87.0 87.0 63.0 14.1 73.0
css_properties_reference.htm
广告