max-block-size
Baseline 广泛可用 *
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 示例，其中展示了不同书写模式的作用。
试一试
max-block-size: 150px;
writing-mode: horizontal-tb;
max-block-size: 150px;
writing-mode: vertical-rl;
max-block-size: 20px;
writing-mode: horizontal-tb;
max-block-size: 75%;
writing-mode: vertical-lr;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box where you can change the maximum block size. <br />This will
limit the size in the block dimension, potentially causing an overflow.
</div>
</section>
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
justify-content: center;
color: white;
}
语法
/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
max-block-size: anchor-size(--my-anchor 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 的值会影响 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 Writing Modes Level 3 规范的后期设计过程中被移除。它们可能会在 Level 4 中恢复。
正式定义
正式语法
max-block-size =
<'max-width'>
<max-width> =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()> |
stretch |
fit-content |
contain
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<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 值。
<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。
.standard-box {
padding: 4px;
background-color: #abcdef;
color: black;
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 Box Sizing Module Level 4 # sizing-values |
浏览器兼容性
加载中…
另见
- 映射的物理属性：
max-width和max-height - 设置另一个方向的最大尺寸：
max-inline-size writing-mode