block-size
CSS 的 block-size
属性会根据元素的书写模式来定义元素块的水平宽度或垂直高度。它会根据 writing-mode
的值来映射至 width
属性或 height
属性。
如果书写模式是垂直方向,那么 block-size
的值就会和元素的宽有关,否则就会和元素的高有关。一个与 block-size
相关的属性是 inline-size
,block-size
用于定义元素在某个方向上的长度,而 inline-size
用于定义元素在另一个方向上的长度。
尝试一下
语法
/* <length> values */
block-size: 300px;
block-size: 25em;
/* <percentage> values */
block-size: 75%;
/* Keyword values */
block-size: max-content;
block-size: min-content;
block-size: fit-content(20em);
block-size: auto;
/* Global values */
block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;
值
形式定义
形式语法
block-size =
<'width'>
示例
垂直文本的 block-size
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
结果
规范
Specification |
---|
CSS Logical Properties and Values Level 1 # dimension-properties |
浏览器兼容性
BCD tables only load in the browser
参见
- 映射至物理方向的属性:
width
和height
writing-mode