Tailwind CSS - 高度
Tailwind CSS Height 高度是一个实用类，它提供了一种有效处理内容高度的方法。它用于设置高度或操作任何 HTML 元素的高度。
Tailwind CSS Height 高度类
以下是 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 | height: 75%; |
| h-1/5 | height: 20%; |
| h-2/5 | height: 40%; |
| h-3/5 | height: 60%; |
| h-4/5 | height: 80%; |
| h-1/6 | height: 16.666667%; |
| h-2/6 | height: 33.333333%; |
| h-3/6 | height: 50%; |
| h-4/6 | height: 66.666667%; |
| h-5/6 | height: 83.333333%; |
| h-full | height: 100%; |
| h-screen | height: 100vh; |
| h-svh | height: 100svh; |
| h-lvh | height: 100lvh; |
| h-dvh | height: 100dvh; |
| h-min | height: min-content; |
| h-max | height: max-content; |
| h-fit | height: 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>
