Mfano wa block-size wa CSS

定义和用法

block-size 属性指定元素在块方向上的大小。

注意:相关的 CSS 属性 writing-mode 定义了块方向,这会影响 block-size 属性的结果。对于英文页面,块方向是向下,而行内方向是从左到右。

CSS 的 block-sizeinline-size 属性与 CSS 的 widthheight 属性非常相似,但 block-sizeinline-size 属性依赖于块方向和行内方向。

实例

例子 1

设置

元素在块方向上的大小:

div {
  block-size: 200px;
}

亲自试一试

例子 2

元素的 writing-mode 属性值设置为 vertical-rl 时,块方向从向下变为横向,这会改变 block-size 属性的作用方向:

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

亲自试一试

CSS 语法

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

属性值

描述
auto 默认。元素的默认 block-size 值。
length Kuzingatia kipimo cha block-size kwa ukingo wa px, pt, cm na vingine. Tazama pia:Viwango ya CSS.
% Kuzingatia kipimo cha block-size kwa ufupi wa kifaa cha kina kwenye mstari wa kipimo cha kina.
initial Kuweka kifaa hiki cha kipimo kwa chaguo cha kuzingatia. Tazama: initial.
inherit Kumekadiri kifaa cha kina kwa kifaa hiki cha kipimo. Tazama: inherit.

Vivyo vya teknolojia

Chaguo cha kuzingatia: auto
Ukumu Haiwa
Makini wa uharibifu: Inahusishwa. Tazama:Menginezo ya hali ya uharibifu.
Menginezo wa tofauti: CSS3
Inayofanyika kwa JavaScript: object.style.blockSize="100px"

Mifanyiko cha kifaa cha kikemia

Machacheo ya kifaa cha uwanja inaonyesha menginezo wa kwanza ambao inakubali kifaa hiki cha kipimo.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Vipindi vya muhimu

Mifanyiko cha CSS3:Ukubwa na upana wa CSS

Mifanyiko cha CSS3:Makina ya kifungu cha CSS

Mifanyiko cha CSS:Menginezo wa height

Mifanyiko cha CSS:Menginezo wa width

Mifanyiko cha CSS:menginezo wa kipendekeza