CSS - max-block-size（最大块大小）属性_CSS 菜鸟教程

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))。

适用于

与 height 和 width 相同。

语法

<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 上下文不再被允许用于其用途。

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>

<< CSS - place-self 属性 CSS - min-block-size（最小块大小）属性 >>