基本样式
| Class | Properties |
|---|---|
| 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; |
基本样式总结
1到12是连续的数字，间隔1。
12到64间隔4。
最大的是96。
支持百分比2,3,4,5,6样式。
h-full表示百分百，h-screen表示屏幕高度。
关键字是 h。
案例：不同高度的盒子
需求：在一行显示多个盒子，并给这些盒子设置不同的高度。
vue3示例：
<script setup>
</script>
<template>
<div class="flex p-8 bg-indigo-50 space-x-3">
<div class="h-12 bg-indigo-500 w-12"></div>
<div class="h-16 bg-indigo-500 w-12"></div>
<div class="h-20 bg-indigo-500 w-12"></div>
<div class="h-24 bg-indigo-500 w-12"></div>
<div class="h-28 bg-indigo-500 w-12"></div>
<div class="h-32 bg-indigo-500 w-12"></div>
<div class="h-36 bg-indigo-500 w-12"></div>
<div class="h-60 bg-indigo-500 w-12"></div>
<div class="h-64 bg-indigo-500 w-12"></div>
</div>
</template>
