CSS - max-block-size 屬性

CSS max-block-size 屬性設定元素的最大塊級尺寸。塊的方向由writing-mode 屬性決定。如果內容完全適應塊內，則此屬性無效。

語法

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

屬性值

值	描述
auto	此值不設定高度限制。預設值。
長度	它使用長度單位（例如 px、em、rem 等）設定元素的 max-block-size。
百分比	它使用相對於包含元素大小的百分比值設定元素的 max-block-size。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承該屬性。

CSS 最大塊級尺寸屬性示例

以下示例解釋了具有不同值的max-block-size 屬性。

具有 auto 值的最大塊級尺寸屬性

為了不設定元素block-size 的任何特定限制，我們使用auto 值。塊的大小取決於內容的長度。以下示例對此進行了說明。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: lightgreen;
         max-block-size: auto;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-block-size property
   </h2>
   <h4>
      max-block-size: auto
   </h4>
   <div class="container">
      <p>
         TutorialsPoint offers comprehensive online 
         tutorials across various subjects, including 
      </p>
      <p>
         programming, web development, and data science. 
         It provides accessible, step-by-step guides, 
      </p>
      <p>
         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 {
         max-block-size: 85px;
      }

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

      .size2 {
         max-block-size: 75%;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-block-size property
   </h2>
   <h4>
      max-block-size: 55% (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 
         </p>
         <p>
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
         </p>
         <p>
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      max-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 
         </p>
         <p>
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
         </p>
         <p>
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
</body>
</html>

具有書寫模式的最大塊級尺寸屬性

max-block-size 屬性可以與writing-mode 屬性結合使用，後者決定塊的方向。在水平模式下，block-size 從上到下增長。在垂直模式下，block-size 從左到右增長。以下示例對此進行了說明。

示例

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

      .container {
         background-color: lightgreen;
         max-block-size: 55%;
      }

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

      .vertical {
         writing-mode: vertical-rl;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-block-size property
   </h2>
   <h4>
      max-block-size: 55% (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 
         </p>
         <p>
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
         </p>
         <p>
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      max-block-size: 55% (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 
         </p>
         <p>
            programming, web development, and data science. 
            It provides accessible, step-by-step guides, 
         </p>
         <p>
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
</body>
</html>

支援的瀏覽器

屬性
max-block-size	57.0	79.0	41.0	12.1	44.0

css_properties_reference.htm

列印頁面