CSS 的 block-size 属性根据元素的书写模式确定元素块的水平或垂直大小。它与CSS的宽度或高度属性有关，基于writing-mode的值。

当书写模式为垂直方向时，block-size的值与元素的宽度有关，否则与元素的高度有关。

可能的值

CSS 属性 block-size 的值与 width和height属性。

适用于

除不可替换的内联元素、表格行和行组。

语法

以下是声明block-size的不同方法:

长度值

block-size: 100px;
block-size: 20em;

百分比值

block-size: 45%;

关键字值

block-size: max-content;
block-size: min-content;
block-size: fit-content;
block-size: auto;

全局值

block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;

CSS block-size: 使用长度值

以下示例演示了使用写入模式:vertical-rl 和块大小给出长度值的输出:

<html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-px {
      block-size: 100px;
   }

   .sampleText-em {
      block-size: 20em;
   }
</style>
</head>
<body>
   <h2>block-size - 使用长度值</h2>
   <div class="container sampleText-px">Sample Text-px</div>
   <div class="container sampleText-em">Sample Text-em</div>
</body>
</html>

以下示例演示了使用写入模式:horizontal-tb 和block-size 被赋予一个长度值:

<html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-px {
      block-size: 100px;
   }

   .sampleText-em {
      block-size: 20em;
   }
</style>
</head>
<body>
   <h2>block-size - 长度值和writing-mode: horizontal-tb</h2>
   <div class="container sampleText-px">Sample Text-px</div>
   <div class="container sampleText-em">Sample Text-em</div>
</body>
</html>

CSS block-size: 使用百分比值

以下示例演示了使用writing-mode的输出:vertical-rl和block-size为以百分比值给出:

<html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-10per {
      block-size: 10%;
   }

   .sampleText-65per {
      block-size: 65%;
   }
</style>
</head>
<body>
   <h2>block-size - percentage value with writing-mode: vertical-rl</h2>
   <div class="container sampleText-10per">Sample Text-10%</div>
   <div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html>

以下示例演示了使用writing-mode:horizontal-tb 和块大小以百分比值给出的输出:

<html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-10per {
      block-size: 10%;
   }

   .sampleText-65per {
      block-size: 65%;
   }
</style>
</head>
<body>
   <h2>block-size - 百分比值和writing-mode: horizontal-tb</h2>
   <div class="container sampleText-10per">Sample Text-10%</div>
   <div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html>

CSS block-size: 使用关键字值

以下示例演示了写入模式的输出:vertical-rl 和块大小作为关键字值给出:

<html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-auto {
      block-size: auto;
   }

   .sampleText-max {
      block-size: max-content;
   }

   .sampleText-min {
      block-size: min-content;
   }

   .sampleText-fit {
      block-size: fit-content;
   }
</style>
</head>
<body>
   <h2>block-size - 关键字值和writing-mode: vertical-rl</h2>
   <div class="container sampleText-auto">Sample Text - auto</div>
   <div class="container sampleText-max">Sample Text - max-content</div>
   <div class="container sampleText-min">Sample Text - min-content</div>
   <div class="container sampleText-fit">Sample Text - fit-content feature</div>
</body>
</html>

以下示例演示了写入模式的输出-mode:horizontal-tb 和 block-size 作为关键字值给出:

<html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-auto {
      block-size: auto;
   }

   .sampleText-max {
      block-size: max-content;
   }

   .sampleText-min {
      block-size: min-content;
   }

   .sampleText-fit {
      block-size: fit-content;
   }
</style>
</head>
<body>
   <h2>block-size -关键字值和writing-mode: horizontal-tb</h2>
   <div class="container sampleText-auto">Sample Text - auto</div>
   <div class="container sampleText-max">Sample Text - max-content</div>
   <div class="container sampleText-min">Sample Text - min-content</div>
   <div class="container sampleText-fit">Sample Text - fit-content feature</div>
</body>
</html>