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