CSS 属性

CSS min-block-size 属性根据元素的书写模式设置元素块的最小水平或垂直尺寸，对应于 min-width 或 min-height 属性基于 writing_mode 值。

min-block-size 确定垂直方向书写模式的最小宽度和水平方向模式的最小高度。min-inline-size 属性定义另一个维度。

属性值

min-block-size 属性接受与 min-height 和 min-width 相同的值。

适用范围

width和height。

语法

<length> 值

min-block-size: 100px;
min-block-size: 5em;

<percentage> 值

min-block-size: 10%;

关键字值

min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content;
min-block-size: fit-content(20em);

CSS min-block-size: <length> 

以下示例演示了 min-block-size: 100px 属性将 div 元素的高度设置为最小值 100px -

<html>
<head>
<style>
   div {
      background-color: orange;
      border: 2px solid blue;
      min-block-size: 100px;   
   }
</style>
</head>
<body>
   <div>I think success has no rules, but you can learn a lot from failure.</div>
</body>
</html>

CSS min-block-size: max-content 

以下示例演示了 min-block-size: max-content 属性设置适合其中内容的最小高度 -

<html>
<head>
<style>
   div {
      background-color: orange;
      border: 2px solid blue;
      min-block-size: max-content;   
   }
</style>
</head>
<body>
   <div>CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </div>
</body>
</html>

CSS min-block-size: 具有水平和垂直文本

以下示例演示如何使用 min-block-size 属性和书写模式在垂直方向显示文本 -

<html>
<head>
<style>
   div {
      background-color: pink;
      border: 2px solid blue;
      min-block-size: 200px;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <div>
      <p>CSS min-block-size</p>
   </div>
</body>
</html>