高度
固定值
通过工具类 h-* 设置高度为固定值,包含如下工具类:
| 工具类 | CSS 属性 |
|---|---|
| h-0 | height: 0px; |
| h-px | height: 1px; |
| h-0.5 | height: 2px; |
| h-1 | height: 4px; |
| h-1.5 | height: 6px; |
| h-2 | height: 8px; |
| h-2.5 | height: 10px; |
| h-3 | height: 12px; |
| h-3.5 | height: 14px; |
| h-4 | height: 16px; |
| h-5 | height: 20px; |
| h-6 | height: 24px; |
| h-7 | height: 28px; |
| h-8 | height: 32px; |
| h-9 | height: 36px; |
| h-10 | height: 40px; |
| h-11 | height: 44px; |
| h-12 | height: 48px; |
| h-14 | height: 56px; |
| h-16 | height: 64px; |
| h-20 | height: 80px; |
| h-24 | height: 96px; |
| h-28 | height: 112px; |
| h-32 | height: 128px; |
| h-36 | height: 144px; |
| h-40 | height: 160px; |
| h-44 | height: 176px; |
| h-48 | height: 192px; |
| h-52 | height: 208px; |
| h-56 | height: 224px; |
| h-60 | height: 240px; |
| h-64 | height: 256px; |
| h-72 | height: 288px; |
| h-80 | height: 320px; |
| h-96 | height: 384px; |
百分比
通过工具类 h-* 设置高度为百分比,包含如下工具类:
| 工具类 | CSS 属性 |
|---|---|
| h-1/2 | height: 50%; |
| h-1/3 | height: 33.3333333%; |
| h-2/3 | height: 66.6666667%; |
| 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.6666667%; |
| h-2/6 | height: 33.3333333%; |
| h-3/6 | height: 50%; |
| h-4/6 | height: 66.6666667%; |
| h-5/6 | height: 83.3333333%; |
| h-full | height: 100%; |
特殊值
通过工具类 h-* 设置高度为特殊值,包含如下工具类:
| 工具类 | CSS 属性 |
|---|---|
| h-auto | height: auto; |
| h-screen | height: 100vh; |
| h-fit | height: fit-content; |
| h-min | height: min-content; |
| h-max | height: max-content; |
限制最大高度
通过工具类 max-h-* 设置限制元素最大高度,包含如下工具类:
| 工具类 | CSS 属性 |
|---|---|
| max-h-0 | max-height: 0px; |
| max-h-full | max-height: 100%; |
| max-h-screen | max-height: 100vh; |
| max-h-none | max-height: none; |
| max-h-min | max-height: min-content; |
| max-h-max | max-height: max-content; |
| max-h-fit | max-height: fit-content; |