CSS inset-inline-start eigenschap

定义和用法

inset-inline-start 属性设置元素在行方向上的起始端与其父元素之间的距离。

注意：要使此属性生效，必须指定 position 属性。

CSS的 inset-inline 和 inset-block 属性与CSS的 top、bottom、left 和 right 属性非常相似，但 inset-block 和 inset-inline 属性依赖于块方向和行方向。

注意：相关的CSS属性 writing-mode 和 direction 定义了行方向。这会影响元素在行方向上的起始位置以及 inset-inline-start 属性的结果。对于英文页面，行方向是从左到右，块方向是向下。

设置已定位<div>元素在行方向上的起始端与父元素之间的距离：

div {
  inset-inline-start: 50px;
}

当<div>元素的 writing-mode 属性值设置为vertical-rl时，行方向是向下。结果是元素的起始端从左侧移动到顶部：

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

当<div>元素的 direction 属性值设置为rtl时，行方向是从右到左。这里的描述有一个小的笔误，应该是“结果是元素的起始端仍然保持在右侧（因为对于rtl，起始端本就是右侧，只是相对于默认ltr布局来说，整个内容翻转了）”：

div {
  inset-inline-start: 50px;
  direction: rtl;
}

inset-inline-start: auto|length|initial|inherit;

值	描述
auto	默认值。元素的默认内嵌距离。
length	以px、pt、cm等单位指定距离。允许负值。参阅：CSS Units。
%	指定相对于父元素在对应轴上大小的百分比距离。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

默认值：	auto
继承性：	否
动画制作：	支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript语法：	object.style.insetInlineStart="30%"