Hisia cha CSS inset-inline

Ufafanuzi na matumizi

inset-inline Uga huitumika kwa kubadilisha kati ya kina na kina kina kwenye uga.

注意：Kuweza kutumika kwa uga huu, lazima kuandikwa position Uga.

inset-inline Uga huitumika kama chaji cha uga zifuatazo:

inset-inline Mimewa ya uga huitumika kwenye viungo vingine:

Kama inayotumia uga mawili ya inset-inline:

inset-inline: 10px 50px;
  • Mwongozo wa 10px
  • Mfupendo wa 50px

如果 inset-inline 属性有一个值：

inset-inline: 10px;
  • 起始端和结束端的距离均为 10px

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

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

实例

例子 1

设置已定位

元素在行方向上与父元素之间的距离：

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

亲自试一试

例子 2

当

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

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3

当

元素的 direction 属性值设置为 rtl 时，行方向是从右到左。结果是元素的起始端从左侧移动到右侧，结束端从右侧移动到左侧：

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。元素的默认 inset-inline 距离。
length Kutumia kama mita, cm, na mengine. Inaruhusiwa uadilifu. Angalia:CSS 单位.
% Kutumia kama namba ya pondo kwa kusababisha kama kina kwa kifaa cha baba katika mstari wa kina kwa uasi huo.
initial Kuwasilisha kwa chaguo cha kuzingatia. Angalia: initial.
inherit Kutumia hiyo kuna uwasilishwa kutoka kwa kifaa cha baba. Angalia: inherit.

Mafano ya uharibifu

Chaguo cha kuzingatia: auto
Kuwa na uasili: Hakuna
Uharibifu: Inakubali. Angalia:Mafano ya hali ya uharibifu.
Mwaka: CSS3
Inayotumiwa kwa lugha ya JavaScript: object.style.insetInline="100px 50px"

kukamilika kwa browser

maneno ya kifaa cha browser inayotambulika kwa kufaa kwa sababu ya hiyo.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

pini ya kijana

教程：CSS 定位

参考：Mwili wa CSS position

参考：Mwili wa CSS direction

参考：Mfano wa writing-mode wa CSS