Css 简明教程

CSS - max-block-size Property

CSS max-block-size 属性设置元素在由 writing_mode 提供的书写方向相反方向的最大尺寸。对于水平书写，它等同于 max-height ，而对于垂直书写，它与 max-width 相同。

CSS max-block-size property sets the maximum size of an element in the opposite direction to its writing direction provided by writing_mode. For horizontal writing, it is equivalent to max-height, while for vertical writing, it is the same as max-width.

max-inline-size 属性定义了另一个尺寸的最大长度。

The max-inline-size property defines the maximum length for the other dimension.

分别为水平尺寸和垂直尺寸设置 max-width 和 max-height 是有帮助的。

It’s helpful to set max-width and max-height for horizontal and vertical sizes, respectively.

使用 max-height 或 max-width 时，选择 max-block-size 以获得内容的最大高度，选择 max-inline-size 以获得最大宽度。查看 writing_mode 示例以了解各种书写模式。

When using max-height or max-width, opt for max-block-size for content’s maximum height and max-inline-size for maximum width. Check out writing_mode examples to see the various writing modes.

Possible Values

你可以将 max-block-size 属性的值设置为 max-height 和 max-width 值允许的任何值。

You can set the value of the max-block-size property to any value that’s allowed for the max-height and max-width values.

  1. <length> − Sets the max-block-size to an absolute value.

  2. <percentage> − Sets the max-block-size as a percentage of the block axis’s containing block’s size.

  3. none − There is no size limit for the box.

  4. max-content − The intrinsic max-block-size.

  5. min-content − The minimum max-block-size.

  6. fit-content − Available space up to the max-content, but never exceeds the min(max-content, max(min-content, stretch)).

  7. fit-content(<length-percentage>) − Fit-content formula is used with the provided argument in place of the available space, i.e. min(max-content, max(min-content, argument)).

Applies To

与 height 和 width 相同。

Same as height and width.

Syntax

<length> Values

max-block-size: 300px;
max-block-size: 25em;

<percentage> Values

max-inline-size: 40%;

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

CSS max-block-size - writing-mode Effects

以下是如何将 writing-mode 值映射到 max-height 或 max-width 的方式：

The following are the ways in which the writing-mode values affect the mapping of max-block-size to max-height or max-width:

Values of writing-mode

max-block-size is equivalent to

horizontal-tb, lr(Deprecated), lr-tb (Deprecated), rl (Deprecated), rb (Deprecated), rb-rl (Deprecated)

max-height

vertical-rl, vertical-lr, sideways-rl (Experimental), sideways-lr (Experimental), tb (Deprecated), tb-rl (Deprecated)

max-width

CSS max-block-size - <length> Value

以下示例演示了 max-block-size: 80px 属性将 div 元素的高度设置为最大 70px −

The following example demonstrates the max-block-size: 80px property sets the height of the div element to a maximum of 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> Value

以下示例演示了 max-block-size: 80% 属性将 div 元素的高度设置为最大 80% −

The following example demonstrates the max-block-size: 80% property sets the height of the div element to a maximum of 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> Value

以下示例演示了 max-block-size: max-content 属性允许 div 元素的高度垂直扩展以适合内容 −

The following example demonstrates the max-block-size: max-content property allowed the height of the div element to expand vertically to fit the content −

<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 - With Horizontal and Vertical Text

以下示例演示如何将 max-block-size 属性与 writing-modes 一起使用以水平和垂直方向显示文本 −

The following example demonstrates how to use max-block-size property with writing-modes to display text in horizontal and vertical directions −

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