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>
打印页面
上一页
下一页
广告