块级尺寸

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSS的block-size属性定义了元素区块的水平宽度和垂直高度，也就是width或height属性，它们的大小取决于写入模式，即writing-mode的值。
 
 

语句

/* <length> values */
block-size: 300px;
block-size: 25em;

/* <percentage> values */
block-size: 75%;

/* Keyword values */
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

/* Global values */
block-size: inherit;
block-size: initial;
block-size: unset;If the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. A related property is inline-size, which defines the other dimension of the element.

如果写入模式为垂直方向，block-size的值与元素的宽度有关，否则取决于元素的高度。相关的属性是定义了元素的其它大小的inline-size。

语句

值

 block-size 属性的值是pwidth 属性与 height 属性的值的结合。

正式语句

<'width'>

例子

HTML

<p class="exampleText">Example text</p>

CSS

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}

说明

说明 状态 注释

CSS Logical Properties and Values Level 1
block-size

 

 Editor's Draft 初始定义

浏览器兼容性 

BCD tables only load in the browser

相关链接