Mfano wa block-size wa CSS
- Mpangilio wa hivi karibuni background-size
- Mpangilio wa hivi karibuni border
定义和用法
block-size
属性指定元素在块方向上的大小。
注意:相关的 CSS 属性 writing-mode
定义了块方向,这会影响 block-size
属性的结果。对于英文页面,块方向是向下,而行内方向是从左到右。
CSS 的 block-size
和 inline-size
属性与 CSS 的 width
和 height
属性非常相似,但 block-size
和 inline-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
- Mpangilio wa hivi karibuni background-size
- Mpangilio wa hivi karibuni border