块级尺寸 - CSS（层叠样式表） 编辑

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

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

这个交互例子的源码存在Githubd的仓库中。如果你想为这个交互例子的项目做一份贡献，请从 https://github.com/mdn/interactive-examples克隆此项目并给我们发送一个pull请求。

语句

/* <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

本页面的兼容性表来自于结构型数据，如果你想为此出一份力，请转到https://github.com/mdn/browser-compat-data ，然后给我们发送pull请求。

相关链接

• The mapped physical properties: width and height
• writing-mode