CSS max-block-size 属性

定义和用法

max-block-size 属性指定元素在块方向上的最大尺寸。

如果内容在块方向上的尺寸小于最大值，则 max-block-size 属性值不起作用。

如果内容在块方向上的尺寸大于最大值，则会应用 max-block-size 属性值。

注意：相关的 CSS 属性 writing-mode 定义了块方向，这会影响 max-block-size 属性的结果。对于英文页面，块方向是向下，而行内方向是从左到右。

CSS max-block-size 属性与 CSS 属性 max-height 和 max-width 非常相似，但 max-block-size 属性依赖于块方向。

实例

例子 1

将 <div> 元素在块方向上的最大尺寸设置为 60 像素：

div {
  max-block-size: 60px;
}

亲自试一试

例子 2：书写模式

将 <div> 元素的 writing-mode 属性值设置为 vertical-lr，块方向会从向下变为侧向，这会影响 max-block-size 属性的工作方式：

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

亲自试一试

例子 3：Max-block-size vs Block-size

观察一个 <div> 元素（block-size 为 100px）和另一个 <div> 元素（max-block-size 为 100px）在内容尺寸变化时的不同反应：

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

亲自试一试

CSS 语法

max-block-size: auto|length|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS block-size 属性

参考：CSS min-block-size 属性

参考：CSS max-height 属性

参考：CSS max-width 属性

参考：CSS writing-mode 属性