Tailwind CSS - 高度

上一個
下一個

Tailwind CSS 高度是一個實用程式類，它提供了一種處理內容高度的有效方法。它用於設定任何 HTML 元素的高度或操作其高度。

Tailwind CSS 高度類

以下是Tailwind CSS 高度類的列表，它們提供了一種處理內容高度的有效方法。

類 CSS 屬性
h-0 height: 0px;
h-px height: 1px;
h-0.5 height: 0.125rem; /* 2px */
h-1 height: 0.25rem; /* 4px */
h-1.5 height: 0.375rem; /* 6px */
h-2 height: 0.5rem; /* 8px */
h-2.5 height: 0.625rem; /* 10px */
h-3 height: 0.75rem; /* 12px */
h-3.5 height: 0.875rem; /* 14px */
h-4 height: 1rem; /* 16px */
h-5 height: 1.25rem; /* 20px */
h-6 height: 1.5rem; /* 24px */
h-7 height: 1.75rem; /* 28px */
h-8 height: 2rem; /* 32px */
h-9 height: 2.25rem; /* 36px */
h-10 height: 2.5rem; /* 40px */
h-11 height: 2.75rem; /* 44px */
h-12 height: 3rem; /* 48px */
h-14 height: 3.5rem; /* 56px */
h-16 height: 4rem; /* 64px */
h-20 height: 5rem; /* 80px */
h-24 height: 6rem; /* 96px */
h-28 height: 7rem; /* 112px */
h-32 height: 8rem; /* 128px */
h-36 height: 9rem; /* 144px */
h-40 height: 10rem; /* 160px */
h-44 height: 11rem; /* 176px */
h-48 height: 12rem; /* 192px */
h-52 height: 13rem; /* 208px */
h-56 height: 14rem; /* 224px */
h-60 height: 15rem; /* 240px */
h-64 height: 16rem; /* 256px */
h-72 height: 18rem; /* 288px */
h-80 height: 20rem; /* 320px */
h-96 height: 24rem; /* 384px */
h-auto height: auto;
h-1/2 height: 50%;
h-1/3 height: 33.333333%;
h-2/3 height: 66.666667%;
h-1/4 height: 25%;
h-2/4 height: 50%;
h-3/4 高度：75%；
h-1/5 高度：20%；
h-2/5 高度：40%；
h-3/5 高度：60%；
h-4/5 高度：80%；
h-1/6 高度：16.666667%；
h-2/6 height: 33.333333%;
h-3/6 height: 50%;
h-4/6 height: 66.666667%;
h-5/6 高度：83.333333%；
h-full 高度：100%；
h-screen 高度：100vh；
h-svh 高度：100svh；
h-lvh 高度：100lvh；
h-dvh 高度：100dvh；
h-min 高度：min-content；
h-max 高度：max-content；
h-fit 高度：fit-content；

Tailwind CSS 高度類功能

  • h-*：此類用於設定任何元素的特定高度，*代表一個數字，可以是上表中任何可接受的值。
  • h-px：此類將元素的高度設定為 1px。
  • h-auto：此類根據內容定義元素的高度。
  • h-1/2：指定高度設定為視窗的一半。
  • h-1/3：指定高度設定為視窗的三分之一。
  • h-1/4：指定高度設定為視窗的四分之一。
  • h-1/5：指定高度設定為視窗的五分之一。
  • h-1/6：指定高度設定為視窗的六分之一。
  • h-full：此類將高度設定為其最大潛力。
  • h-screen：指定高度設定為螢幕尺寸。
  • h-svh：此類將元素的高度設定為 100 svw。
  • h-lvh：此類將元素的高度設定為 100 lvh。
  • h-dvh：此類將元素的高度設定為 100 dvh
  • h-min：此類用於指定最小高度。
  • h-max：此類用於指定最大高度。
  • h-fit：此類將高度設定為適合內容到父元素。

Tailwind CSS 高度類示例

以下示例將說明 Tailwind CSS 高度類實用程式。

定義固定高度

要定義固定高度，我們可以使用諸如'h-px'、'h-1'和'h-24'之類的類。任何有效數值（h-*）都可以從上表中使用來建立固定高度元素。

示例

在此示例中，我們將建立多個元素並在每個元素上設定不同的固定高度。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Height Class
    </h2>
    <div class="flex flex-wrap-reverse p-2 space-x-4 
                h-auto w-80 bg-green-100 text-center">
        <div class="h-8 w-12 bg-green-400">h-8</div>
        <div class="h-16 w-12 bg-green-400">h-16</div> 
        <div class="h-24 w-12 bg-green-400">h-24</div> 
        <div class="h-32 w-12 bg-green-400">h-32</div> 
        <div class="h-40 w-12 bg-green-400">h-40</div> 
    </div>
</body>

</html>

設定全高

要設定任何元素的全高，您需要在該元素上使用“h-full”類。設定全高表示它將佔用內容所需的空間。

示例

在此示例中，我們建立了兩個元素。在第一個元素中，我們將設定高度“h-24”，但在懸停時，它將根據父元素擴充套件到全高。在第二個元素中，我們將最初設定全高。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Height Class
    </h2>
    <div class="flex flex-wrap-reverse p-2 space-x-12 
                    h-60 w-40 bg-green-100 text-center">
        <div class="h-24 hover:h-full w-12 bg-green-400">
            h-24
        </div>
        <div class="h-full w-12 bg-green-400">
            h-full
        </div>
    </div>
</body>

</html>

動態視口高度

視口高度佔用即時視口高度的空間；如果您向下滾動，則它將自動增加該元素的高度。透過使用 tailwind 'h-dvh' 類，您可以建立它。以類似的方式，您可以使用 'h-lvh' 和 'h-svh' 類建立大視口和小視口。

示例

在此示例中，我們將建立一個具有動態視口高度功能的元素。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Height Class
    </h2>
    <div class="h-44 overflow-scroll flex 
                space-x-4 text-center">
        <div class="h-dvh w-40 bg-green-400">
            Dynamic Viewport Height
        </div>
        <div class="w-40 bg-green-400">
            Without Dynamic Viewport Height
        </div>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告