CSS 属性

CSS max-block-size 属性设置元素在与 writing_mode 提供的书写方向相反方向的元素的最大尺寸。

对于横向书写，相当于max-height，对于纵向书写，相当于max-width。

max-inline-size 属性定义其他维度的最大长度。

设置 max-width 和 max-height 分别表示水平和垂直尺寸。

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

属性值

您可以将 max-block-size 属性的值设置为 max-height度和最max-width值。

  • <length>: 将最大块大小设置为绝对值。

  • <percentage>: 将最大块大小设置为块轴包含的百分比块的大小。

  • none: 盒子没有大小限制。

  • max-content: 内在的 max- block-size。

  • min-content: 最小最大块大小。

  • fit-content: 可用空间最多可达 max-content，但绝不会超过 min(max-content, max(min-content,stretch))。

  • fit-content(<length-percentagenotransR): Fit-content 公式与提供的参数一起使用来代替可用空间，即 min(max-content, max(min-content) ，参数））。

适用范围

height 和 width。

语法

<length> 值

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

<percentage> 值

max-inline-size: 40%;

关键字值

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-block-size 为 max-height 或 max-宽度:

writing-mode 的值max-block-size 相当于
horizontal-tb、lr（已弃用）、lr-tb（已弃用）、rl（已弃用）、rb（已弃用）、rb-rl（已弃用）max-heigth
vertical-rl、vertical-lr、sideways-rl（实验）、sideways-lr（实验）、 tb（已弃用）、tb-rl（已弃用）max-width
CSS 书写模式第 3 级规范在设计过程后期消除了书写模式值 sideways-lr 和 sideways-rl。它们可以在 4 级恢复。
只有 SVG 1.x 上下文可以使用写入模式 lr、lr-tb、rl、rb 和 rb-tl； HTML 上下文不再允许使用。

CSS max-block-size: <length> 值

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

<html>
<head>
<style>
   div {
      background-color: orange;
      border: 2px solid blue;
      max-block-size: 80px;
   }
</style>
</head>
<body>
   <div>
      <h3>yxjc123.com</h3>
      <h4>CSS max-block-size: 80px</h4>
      <p>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。</p>
   </div>
</body>
</html>

CSS max-block-size: <percentage> 值

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

<html>
<head>
<style>
   div {
      background-color: violet;
      border: 2px solid blue;
      max-block-size: 80%;;
   }
</style>
</head>
<body>
   <div>
      <h2>yxjc123.com</h2>
      <h3>CSS max-block-size: 80%</h4>
      <p>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。</p>
   </div>
</body>
</html>

CSS max-block-size: <max-content> 值

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

<html>
<head>
<style>
   div {
      background-color: violet;
      border: 2px solid blue;
      max-block-size: max-content;
   }
</style>
</head>
<body>
   <div>
      <h2>yxjc123.com</h2>
      <h3>CSS max-block-size: max-content</h4>
      <p>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。</p>
   </div>
</body>
</html>

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

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

<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>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。</p>
   </div>
   <div class="box2">
      <h3>CSS max-block-size with writing-mode: vertical-rl.</h3>
      <p>在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。</p>
   </div>
</body>
</html>