Mfano wa CSS inset-block-end

定义和用法

inset-block-end 属性设置元素在块方向上的末端与父元素之间的距离。

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

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

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

实例

例子 1

设置已定位

元素在块方向上的末端与父元素之间的距离：

div {
  inset-block-end: 50px;
}

Tenda kusema hapa

例子 2

当

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

div {
  inset-block-end: 50px;
  writing-mode: vertical-rl;
}

Tenda kusema hapa

Inayofaa kusoma kwa CSS:

inset-block-end: auto|length|initial|inherit;

Thamani ya tabia

Thamani Maelezo
auto Chaguo cha kuzingatia. Miundo ya kufungua kwa kina kwa sababu ya kina kina.
length Kuchagua miundo kwa viwango vya px, pt, cm na vingine. Inaonyesha thamani za zaidi ya uenezi. Tazama:Matumizi ya ukingo wa CSS.
% Kuchagua miundo inayotawala kwa uenezi wa ukweli wa kina wa kina kwa ukweli wa kina wa kina.
initial Kuweka tabia hii kwa chaguo cha kuzingatia. Tazama: initial.
inherit Kuathirika tabia hii kutoka kwa ukweli wake wa kina. Tazama: inherit.

Maelezo ya teknolojia

Chaguo cha kuzingatia: auto
Kumuathirika: Hakuna
Msaada wa hali ya msaada: Inasaidia. Tazama:Mafanikio ya hali ya msaada.
Barabara: CSS3
Inayofaa kusoma kwa JavaScript: object.style.insetBlockEnd="100px"

Mfumo wa kusoma-internet wa kusaidia

Masheni ya tabia hizi inaeleza barabara ya programu ya kusoma-internet iliyopangwa kufungua kwa kina kwa sababu ya kiwango cha kwanza kinachosaidia tabia hii.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Vipindi vya kwanza

Mafunzo:Tahashiliano la CSS

Tazama:Hisia cha CSS position

Tazama:Mwongozo wa writing-mode wa CSS