CSS - block-size 屬性

CSS 的 **block-size** 屬性根據元素的書寫模式確定元素的水平或垂直大小。當書寫模式為垂直時，會影響元素的寬度；當書寫模式為水平時，會影響元素的高度。

語法

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

屬性值

值	描述
auto	設定元素的預設塊級大小。預設值。
長度值	以 px、cm、pt 等單位設定塊級大小。
百分比	以百分比值設定塊級大小。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 塊大小屬性示例

以下示例說明了使用不同值的 **block-size** 屬性。

帶有 auto 值的塊大小屬性

要讓瀏覽器決定塊的大小，我們使用 auto 值。auto 值將預設值設定為 block-size。在以下示例中，帶有和不帶有書寫模式的 block-size 都使用了 auto 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         background-color: lightgreen;
         border: solid black 1px;
         block-size: auto;
      }

      #auto-vertical {
         writing-mode: vertical-rl;
      }

      #auto-horizontal {
         writing-mode: horizontal-tb;
      }
   </style>
</head>

<body>

   <h2>
      CSS block-size property
   </h2>
   <p>
      a) Auto Block Size
   </p>
   <div >
      <p>
         This is a p tag with auto block size
      </p>
   </div>
   <p>
      b) Auto Block Size with 
      Vertical Writing Mode
   </p>
   <div id="auto-vertical">
      <p>
         This is p tag with auto block size 
         and vertical writing mode.
      </p>
   </div>
   <p>
      c) Auto Block Size with 
      Horizontal Writing Mode
   </p>
   <div id="auto-horizontal">
      <p>
         This is p tag with auto block size
         and horizontal writing mode.
      </p>
   </div>

</body>

</html>
</html>

帶有長度值的塊大小屬性

要根據我們的選擇設定塊的大小，我們可以用長度值指定大小（例如 10px、25px 等）。在以下示例中，帶有和不帶有書寫模式的 block-size 都使用了 80px 的大小。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         background-color: lightgreen;
         border: solid black 1px;
         block-size: 80px;
      }

      #length-vertical {
         writing-mode: vertical-rl;
      }

      #length-horizontal {
         writing-mode: horizontal-tb;
      }
   </style>
</head>

<body>

   <h2>
      CSS block-size property
   </h2>
   <p>
      a) 80px  Block Size
   </p>
   <div >
      <p>
         This is a p tag with 80px block size
      </p>
   </div>
   <p>
      b) 80px Block Size with 
      Vertical Writing Mode</p>
   <div id="length-vertical">
      <p>
         This is p tag with 80px block size 
         and vertical writing mode.
      </p>
   </div>
   <p>
      c) 80px Block Size with 
      Horizontal Writing Mode
   </p>
   <div id="length-horizontal">
      <p>
         This is p tag with 80px block size
         and horizontal writing mode.
      </p>
   </div>

</body>

</html>
</html>

帶有百分比值的塊大小屬性

要根據我們的選擇設定塊的大小，我們可以用百分比指定大小（例如 10%、15% 等）。在以下示例中，帶有和不帶有書寫模式的 block-size 都使用了 40% 的大小。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         height: 100vh;
      }

      div {
         background-color: lightgreen;
         border: solid black 1px;
         block-size: 40%;
      }

      #percent-vertical {
         writing-mode: vertical-rl;
      }

      #percent-horizontal {
         writing-mode: horizontal-tb;
      }
   </style>
</head>

<body>

   <h2>
      CSS block-size property
   </h2>
   <p>
      a) 40% Block Size
   </p>
   <div>
      <p>
         This is a p tag with 40% block size
      </p>
   </div>
   <p>
      b) 40% Block Size with 
      Vertical Writing Mode
   </p>
   <div id="percent-vertical">
      <p>
         This is p tag with 40% 
         block size and vertical writing mode.
      </p>
   </div>
   <p>
      c) 40% Block Size with 
      Horizontal Writing Mode
   </p>
   <div id="percent-horizontal">
      <p>
         This is p tag with 40% 
         block size and horizontal writing mode.
      </p>
   </div>

</body>

</html>

</html>

支援的瀏覽器

屬性
block-size	57.0	79.0	41.0	12.1	44.0

css_properties_reference.htm

列印頁面