Mwongozo wa CSS inset-block

Muhtasari na uendeshaji

inset-block Mfano wa mawasiliano kati ya elementi ya kuzingatia kwa ukubwa wa kichwa cha jicho la baba.

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

inset-block 属性是以下属性的简写属性：

inset-block 属性的值可以通过不同方式设置：

如果 inset-block 属性有两个值：

inset-block: 10px 50px;
  • 起始距离是 10px
  • 结束距离是 50px

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

inset-block: 10px;
  • 起始和结束距离都是 10px

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

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

实例

例子 1

设置已定位

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

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

亲自试一试

例子 2

当

元素的 writing-mode 属性值设置为 vertical-rl 时，元素的起始位置从顶部移动到右侧，元素的结束位置从底部移动到左侧：

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

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。元素的默认 inset-block 值。
length 以 px、pt、cm 等单位指定距离。允许负值。参阅：Viwango vya CSS.
% 指定相对于父元素在对应轴上大小的百分比距离。
initial Inaingiza kiwango cha kina cha kina hii kwa chaguo cha kuzingatia. Angalia: initial.
inherit Inaingia kwa kina ya maelezo hii kwa kiwango cha kina cha kina chake. Angalia: inherit.

Maelezo ya mifano

Chaguo cha kuzingatia: auto
Kuwasiliana: Hapana
Inayofanywa na hali ya uharibifu: Inaongezewa. Angalia:Mafanikio ya hali ya uharibifu.
Tendai: CSS3
Inayofanywa na Kiingilizi: object.style.insetBlock="100px 50px"

Msaada wa kina kina

Jumla za vifaa vingine vingine ina namba ya kina kwa kina ya mtumishi wa kina anayosafirisha hii kiwango.

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

Paghuzi za tovuti

Mafunzo:Tengeneza ya CSS

Tazama:Hisia position

Tazama:Mwongozo wa CSS inset-block-end

Tazama:Mwongozo wa CSS inset-block-start

Tazama:Mwongozo wa writing-mode wa CSS