块级尺寸

这个交互例子的源码存在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;
}

说明

浏览器兼容性 

相关链接

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