max-block-size

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

max-block-size CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode . That is, if the writing direction is horizontal, then max-block-size 相当于 max-height ; if the writing direction is vertical, max-block-size 如同 max-width .

The other dimension's maximum length is specified using the max-inline-size 特性。

This is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.

Any time you would normally use max-height or max-width , you should instead use max-block-size to set the maximum "height" of the content (even though this may not be a vertical value) and max-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal). See the 范例 in writing-mode , which shows the different writing modes in action.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
/* <percentage> values */
max-block-size: 75%;
/* Keyword values */
max-block-size: auto;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content(20em);
/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;

值

max-block-size property's value can be any value that's legal for the max-width and max-height properties:

<length>: Defines the max-width as an absolute value.
<percentage>: Defines the max-width as a percentage of the containing block's width.
auto: The browser will calculate and select a max-width for the specified element.
none
max-content: The intrinsic preferred max-width .
min-content: The intrinsic minimum max-width .
fit-content( <length-percentage> ): Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument )) .

How writing-mode affects directionality

The values of writing-mode affect the mapping of max-block-size to max-width or max-height as follows:

Values of `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 and sideways-rl were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

The writing modes lr , lr-tb , rl , rb ，和 rb-tl are no longer allowed in HTML contexts; they may only be used in SVG 1.x contexts.

形式定义

初始值	`0`
适用于	same as `width` and `height`
继承	no
百分比	block-size of containing block
计算值	same as `max-width` and `max-height`
动画类型	a length , percentage or calc();

形式句法

<'max-width'>

范例

Setting max-block-size with horizontal and vertical text

In this example, the same text (the opening sentences from Herman Melville's novel Moby-Dick ) is presented in both the horizontal-tb and vertical-rl writing modes.

Everything else about the two boxes is identical, including the values used for max-block-size .

HTML

The HTML simply establishes the two <div> blocks that will be presented with their writing-mode set using the classes horizontal or vertical . Both boxes share the standard-box class, which simply establishes coloring, padding, and their respective values of 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

The CSS defines three classes. The first, standard-box , is applied to both boxes, as seen above. It provides standard styling including the minimum and maximum block sizes, font size, and so forth.

After that come the classes horizontal and vertical , which add the writing-mode property to the box, with the value set to horizontal-tb or vertical-rl depending on which class is used.

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  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 Logical Properties and Values Level 1 The definition of 'max-block-size' in that specification.	编者草案	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`max-block-size`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 41 完整支持 41 不支持 38 — 51 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 12.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 41 完整支持 41 不支持 38 — 51 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43	Safari iOS 完整支持 12.2	Samsung Internet Android 完整支持 5.0
`fit-content`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 不支持 No	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 12.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 不支持 No	Opera Android 完整支持 43	Safari iOS 完整支持 12.2	Samsung Internet Android 完整支持 5.0 Alternate Name 完整支持 5.0 Alternate Name Alternate Name Uses the non-standard name: `-webkit-fill-available`
`max-content`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 66 完整支持 66 完整支持 41 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 12.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 66 完整支持 66 完整支持 41 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 43	Safari iOS 完整支持 12.2	Samsung Internet Android 完整支持 5.0
`min-content`	Chrome 完整支持 57	Edge 完整支持 79	Firefox 完整支持 66 完整支持 66 完整支持 41 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 12.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 66 完整支持 66 完整支持 41 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 43	Safari iOS 完整支持 12.2	Samsung Internet Android 完整支持 5.0

图例

完整支持
不支持
用户必须明确启用此特征。
使用非标名称。
要求使用供应商前缀或不同名称。

另请参阅

The mapped physical properties: max-width and max-height
Setting the other direction's maximum size: max-inline-size
writing-mode

元数据

最后修改： Jul 20, 2020

在此页

句法

值