CSS - min-block-size 属性

上一页
下一页

CSS min-block-size 属性设置元素的最小块级尺寸。块的方向由 writing-mode 属性决定。如果内容在块中很好地适应，则此属性无效。

语法

min-block-size: auto | length | percentage | initial | inherit;

属性值

值 描述
auto 此值为不设置高度限制。默认值。
length 使用长度单位（例如 px、em、rem 等）设置元素的 min-block-size。
percentage 使用相对于包含元素大小的百分比值设置元素的 min-block-size。
initial 将属性设置为其默认值。
inherit 从父元素继承该属性。

CSS 最小块级尺寸属性示例

以下示例说明了使用不同值的 min-block-size 属性。

使用 auto 值的最小块级尺寸属性

为了不设置元素 block-size 的任何特定限制，我们使用 auto 值。块的大小取决于内容的长度。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: lightgreen;
         min-block-size: auto;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-block-size property
   </h2>
   <h4>
      min-block-size: auto
   </h4>
   <div class="container">
      <p>
         TutorialsPoint offers comprehensive online 
         tutorials across various subjects, including 
         programming, web development, and data science. 
         It provides accessible, step-by-step guides, 
         practical examples, and interactive learning 
         resources for learners of all levels.
      </p>
   </div>
</body>
</html>

使用长度值的最小块级尺寸属性

要设置元素块的最小尺寸，我们可以使用长度单位（例如 px、em、rem 等）指定尺寸。指定的尺寸将应用于块。如果内容大于块的尺寸，则元素将增长以容纳内容。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: lightgreen;
      }

      .size1 {
         min-block-size: 90px;
      }

      .size2 {
         min-block-size: 4.5em;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-block-size property
   </h2>
   <h4>
      min-block-size: 90px
   </h4>
   <div class="container size1">
      <p>
         TutorialsPoint offers comprehensive online 
         tutorials across various subjects, including 
         programming, web development, and data science. 
         It provides accessible, step-by-step guides, 
         practical examples, and interactive learning 
         resources for learners of all levels.
      </p>
   </div>
   <br/>
   <h4>
      min-block-size: 4.5em
   </h4>
   <div class="container size2">
      <p>
         TutorialsPoint offers comprehensive online 
         tutorials across various subjects, including 
         programming, web development, and data science. 
         It provides accessible, step-by-step guides, 
         practical examples, and interactive learning 
         resources for learners of all levels.
      </p>
   </div>
</body>
</html>

使用百分比值的最小块级尺寸属性

要设置元素块的最小尺寸，我们可以使用相对于包含元素大小的百分比值（例如 10%）指定尺寸。指定的尺寸将应用于块。如果内容大于块的尺寸，则元素将增长以容纳内容。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         height: 100px;
      }

      .container {
         background-color: lightgreen;
      }

      .size1 {
         min-block-size: 58%;
      }

      .size2 {
         min-block-size: 75%;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-block-size property
   </h2>
   <h4>
      min-block-size: 58% (of the size 
      of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size1">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      min-block-size: 75% (of the size 
      of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size2">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
</body>
</html>

带书写模式的最小块级尺寸属性

min-block-size 属性可以与 writing-mode 属性结合使用，后者确定块方向。在水平模式下，block-size 从上到下增长。在垂直模式下，block-size 从左到右增长。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         height: 150px;
      }

      .container {
         background-color: lightgreen;
         min-block-size: 40%;
      }

      .horizontal {
         writing-mode: horizontal-lr;
      }

      .vertical {
         writing-mode: vertical-rl;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-block-size property
   </h2>
   <h4>
      min-block-size: 40% (of the size of the 
      containing element); writing-mode: horizontal-lr;
   </h4>
   <div class="outer-container">
      <div class="container horizontal">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      min-block-size: 40% (of the size of the 
      containing element); writing-mode: vertical-rl;
   </h4>
   <div class="outer-container">
      <div class="container vertical">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
</body>
</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
min-block-size 57.0 79.0 41.0 12.1 44.0
css_properties_reference.htm
打印页面
上一页
下一页
广告