CSS max-block-size 属性设置元素的最大大小，方向与 writing_mode 提供的写入方向相反。对于水平写入，它等同于 max-height，而对于垂直写入，它等同于 max-width。
max-inline-size 属性定义另一个维度的最大长度。
分别为水平和垂直大小设置 max-width 和 max-height 会很有帮助。
使用 max-height 或 max-width 时，请选择 max-block-size 作为内容的最大高度，选择 max-inline-size 作为最大宽度。查看writing_mode示例，了解各种书写模式。
可能的值您可以将 max-block-size 属性的值设置为 max-height 和 max-width 值允许的任何值。
- <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>) − 使用拟合-content公式，用提供的参数代替可用空间，即 min(max-content, max(min-content, argument))。
适用于
语法
<length> 值
max-block-size: 300px;
max-block-size: 25em;
<percentage> 值
max-inline-size: 40%;
Keyword 值
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);
CSS max-block-size - 写入模式效果
以下是写入模式值影响 max-block-size 到 max-height 或 max-width 的映射的方式：
| 写作模式的值 | 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 |
CSS 编写模式第 3 级规范在设计过程后期消除了编写模式值 sideways-lr 和 sideways-rl。他们可能会在4级恢复。
只有 SVG 1.x 上下文可以使用 lr、lr-tb、rl、rb 和 rb-tl 编写模式;HTML 上下文不再被允许用于其用途。
只有 SVG 1.x 上下文可以使用 lr、lr-tb、rl、rb 和 rb-tl 编写模式;HTML 上下文不再被允许用于其用途。
CSS max-block-size - <length> 值
以下示例演示了 max-block-size： 80px 属性将 div 元素的高度设置为最大 70px −
<html>
<head>
<style>
div {
background-color: orange;
border: 2px solid blue;
max-block-size: 80px;
}
</style>
</head>
<body>
<div>
<h3>Tutorialspoint</h3>
<h4>CSS max-block-size: 80px</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>
CSS max-block-size - <percentage> 值
以下示例演示了 max-block-size： 80% 属性将 div 元素的高度设置为最大 80% −
<html>
<head>
<style>
div {
background-color: violet;
border: 2px solid blue;
max-block-size: 80%;;
}
</style>
</head>
<body>
<div>
<h2>Tutorialspoint</h2>
<h3>CSS max-block-size: 80%</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>
CSS max-block-size - <max-content> 值
以下示例演示了 max-block-size： max-content 属性允许 div 元素的高度垂直扩展以适应内容 -
<html>
<head>
<style>
div {
background-color: violet;
border: 2px solid blue;
max-block-size: max-content;
}
</style>
</head>
<body>
<div>
<h2>Tutorialspoint</h2>
<h3>CSS max-block-size: max-content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>
CSS max-block-size - 包含水平和垂直文本
以下示例演示了如何将 max-block-size 属性与写入模式一起使用，以在水平和垂直方向上显示文本 -
<html>
<head>
<style>
div {
background-color: yellow;
border: 2px solid blue;
margin: 10px;
padding: 5px;
max-block-size: 150px;
min-block-size: 120px;
}
.box1 {
writing-mode: horizontal-tb;
}
.box2{
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="box1">
<h3>CSS max-block-size with writing-mode: horizontal-tb</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="box2">
<h3>CSS max-block-size with writing-mode: vertical-rl.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</body>
</html>
