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