CSS - max-block-size 属性：初学者的友好指南

你好啊，未来的 CSS 巫师们！今天，我们将踏上一段激动人心的旅程，探索 CSS 的世界，特别是 max-block-size 属性。别担心如果你是新手；我会成为你的友好向导，我们会一步步地攻克这个话题。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起潜入！

CSS - Max Block Size

max-block-size 是什么？

在我们深入研究之前，让我们先了解一下 max-block-size 是怎么回事。想象你正在用积木建造一座塔。max-block-size 属性就像是在设置你的塔能建多高的限制。在 CSS 术语中，它定义了元素在块方向上的最大尺寸。

“但等等，”你可能会问，“什么是块方向？”好问题！块方向通常是水平书写语言（如英语）的垂直方向，以及垂直书写语言（如传统日语）的水平方向。

语法和可能的值

让我们看看如何在我们的 CSS 中使用 max-block-size：

.my-element {
max-block-size: value;
}

现在，我们可以将“value”替换成什么？以下是一个包含所有可能值的便捷表格：

值	描述
`<length>`	一个固定的长度，如 `300px` 或 `20em`
`<percentage>`	包含块尺寸的百分比
`none`	无限制（这是默认值）
`max-content`	内在的首选最大尺寸
`min-content`	内在的最小尺寸
`fit-content`	类似于 `auto`，但有一些不同
`auto`	浏览器决定最大尺寸

应用范围

并非所有的 CSS 属性都适用于每个 HTML 元素。max-block-size 属性适用于所有元素，除了：

非替换内联元素
表行
行组

别担心如果你现在还不熟悉这些术语。随着你在 CSS 旅程上的进步，你会遇到它们并理解为什么它们是例外。

CSS max-block-size - writing-mode 效果

现在，事情变得有趣了！max-block-size 属性的行为会根据文本的 writing-mode 而改变。让我们看一些例子：

示例 1：水平书写模式

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
这是一个水平书写模式且 max-block-size 设置为 200px 的盒子。
</div>

在这个例子中，max-block-size 将限制盒子的高度为 200 像素，因为在水平书写模式中块方向是垂直的。

示例 2：垂直书写模式

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
这是一个垂直书写模式且 max-block-size 设置为 200px 的盒子。
</div>

在这种情况下，max-block-size 将限制盒子的宽度为 200 像素，因为在垂直书写模式中块方向是水平的。

CSS max-block-size - 值

当我们使用长度值时，我们是在设置一个固定的最大尺寸。让我们看看它是如何工作的：

.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="fixed-size">
这个盒子的 max-block-size 为 150px。如果内容超过这个高度，它将溢出。
</div>

在这个例子中，无论我们在 div 中放入多少内容，它都不会超过 150 像素的高度。

CSS max-block-size - 值

百分比相对于包含块的尺寸。以下是如何工作的：

.parent {
height: 300px;
background-color: lightgray;
}

.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="parent">
<div class="child">
这个子 div 的 max-block-size 为其父 div 高度的 50%。
</div>
</div>

在这种情况下，子 div 的高度永远不会超过其父 div 的一半。

CSS max-block-size - 值

max-content 值在你想让你的元素尽可能大以适应其内容，但不超过内容时特别有用。让我们看一个例子：

.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="max-content-box">
这个盒子将扩展以适应其内容，但不会超过那个范围。
</div>

这个盒子将增长以容纳其内容，但不会超出那个范围。

CSS max-block-size - 水平和垂直文本

让我们用一个结合水平和垂直文本的例子来结束：

.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="mixed-text">
这是水平文本，max-block-size 为 200px。
<div class="vertical-text">
这是垂直文本，max-block-size 为 100px。
</div>
</div>

在这个例子中，我们有一个包含水平文本和最大高度为 200px 的容器。在其中，我们有一个具有垂直文本和最大宽度为 100px 的另一个 div。

就是这样！我们已经从不同的角度探索了 max-block-size 属性。记住，掌握 CSS 的关键是实践。所以，不要害怕用这些例子进行实验，修改它们，看看会发生什么。快乐编码，愿你的积木总是尺寸恰到好处！

Credits: Image by storyset