高度
固定值
通过工具类 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; |