max-block-size

max-block-size CSS 属性指定元素在与由 writing-mode 指定的书写方向相反的方向上的最大尺寸。也就是说，如果书写方向是水平的，那么 max-block-size 等效于 max-height；如果书写方向是垂直的，max-block-size 与 max-width 相同。

另一个维度的最大长度由 max-inline-size 属性指定。

这很有用，因为 max-width 始终用于水平尺寸，而 max-height 始终用于垂直尺寸，如果您需要根据文本内容的大小设置长度，则需要能够在考虑书写方向的情况下进行设置。

通常使用 max-height 或 max-width 的任何地方，都应该使用 max-block-size 来设置内容的最大“高度”（即使这可能不是垂直值）和 max-inline-size 来设置内容的最大“宽度”（尽管这可能是垂直的而不是水平的）。请参阅 writing-mode 示例，这些示例展示了不同的书写模式的实际应用。

试试看

语法

css

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
max-block-size: anchor-size(--myAnchor self-inline, 250px);
max-block-size: calc(anchor-size(width) / 2);

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

/* Keyword values */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fit-content(20em);

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;

值

max-block-size 属性的值可以是 max-width 和 max-height 属性允许的任何值。

<length>: 将 max-block-size 定义为绝对值。
<percentage>: 将 max-block-size 定义为包含块在块轴上的尺寸的百分比。
none: 对盒子的大小没有限制。
max-content: 固有的首选 max-block-size。
min-content: 固有的最小 max-block-size。
fit-content: 使用可用空间，但不超过 max-content，即 min(max-content, max(min-content, stretch))。
fit-content(<length-percentage>): 使用 fit-content 公式，并将可用空间替换为指定的参数，即 min(max-content, max(min-content, argument))。

writing-mode 如何影响方向性

writing-mode 的值会影响 max-block-size 到 max-width 或 max-height 的映射，如下所示。

`writing-mode` 的值	`max-block-size` 等效于
`horizontal-tb`, `lr`, `lr-tb`, `rl`, `rb`, `rb-rl`	`max-height`
`vertical-rl`, `vertical-lr`, `sideways-rl`, `sideways-lr`, `tb`, `tb-rl`	`max-width`

注意：writing-mode 值 sideways-lr 和 sideways-rl 在 CSS 书写模式级别 3 规范的设计过程中被移除。它们可能会在级别 4 中恢复。

注意：书写模式 lr、lr-tb、rl、rb 和 rb-tl 在 HTML 上下文中不再允许；它们只能在 SVG 1.x 上下文中使用。

正式定义

初始值	`none`
应用于	与 `width` 和 `height` 相同
继承	否
百分比	包含块的块大小
计算值	与 `max-width` 和 `max-height` 相同
动画类型	一个 <length>、<percentage> 或 calc()；

正式语法

max-block-size = 
  <'max-width'>  

<max-width> = 
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

使用水平和垂直文本设置 max-block-size

在本示例中，相同的文本（来自赫尔曼·梅尔维尔的小说白鲸的开头几句话）在 horizontal-tb 和 vertical-rl 书写模式中呈现。

两个盒子中的其他所有内容都相同，包括用于 max-block-size 的值。

HTML

HTML 代码建立了两个 <div> 块，它们将通过类 horizontal 或 vertical 来设置其 writing-mode 属性来呈现。这两个盒子都共享 standard-box 类，它定义了颜色、填充和它们各自的 max-block-size 值。

html

<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

CSS

CSS 定义了三个类。第一个是 standard-box，它应用于这两个盒子，如上所述。它提供了标准的样式，包括最小和最大块大小、字体大小等。

之后是 horizontal 和 vertical 类，它们为盒子添加了 writing-mode 属性，其值根据所使用的类分别设置为 horizontal-tb 或 vertical-rl。

css

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

结果

规范

规范
CSS 逻辑属性和值级别 1 # propdef-max-block-size
CSS 盒子大小模块级别 4 # sizing-values

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

映射的物理属性：max-width 和 max-height
设置另一个方向的最大尺寸：max-inline-size
writing-mode