尺寸调整
高度
用于设置元素高度的实用工具。
| 类 | 样式 |
|---|---|
h-<数字> | height: calc(var(--spacing) * <数字>); |
h-<分数> | height: calc(<分数> * 100%); |
h-auto | height: auto; |
h-px | height: 1px; |
h-full | height: 100%; |
h-screen | height: 100vh; |
h-dvh | height: 100dvh; |
h-dvw | height: 100dvw; |
h-lvh | height: 100lvh; |
h-lvw | height: 100lvw; |
h-svh | height: 100svh; |
h-svw | height: 100svw; |
h-min | height: min-content; |
h-max | height: max-content; |
h-fit | height: fit-content; |
h-(<自定义属性>) | height: var(<自定义属性>); |
h-[<值>] | height: <值>; |
size-<数字> | width: calc(var(--spacing) * <数字>); height: calc(var(--spacing) * <数字>); |
size-<分数> | width: calc(<分数> * 100%); height: calc(<分数> * 100%); |
size-auto | width: auto; height: auto; |
size-px | width: 1px; height: 1px; |
size-full | width: 100%; height: 100%; |
size-dvw | width: 100dvw; height: 100dvw; |
size-dvh | width: 100dvh; height: 100dvh; |
size-lvw | width: 100lvw; height: 100lvw; |
size-lvh | width: 100lvh; height: 100lvh; |
size-svw | width: 100svw; height: 100svw; |
size-svh | width: 100svh; height: 100svh; |
size-min | width: min-content; height: min-content; |
size-max | width: max-content; height: max-content; |
size-fit | width: fit-content; height: fit-content; |
尺寸-(<自定义属性>) | width: var(<自定义属性>); height: var(<自定义属性>); |
尺寸-[<值>] | width: <值>; height: <值>; |
示例
基本示例
使用 h-<数字> 工具类，例如 h-24 和 h-64，根据间距比例设置元素的固定高度
h-96
h-80
h-64
h-48
h-40
h-32
h-24
<div class="h-96 ...">h-96</div><div class="h-80 ...">h-80</div><div class="h-64 ...">h-64</div><div class="h-48 ...">h-48</div><div class="h-40 ...">h-40</div><div class="h-32 ...">h-32</div><div class="h-24 ...">h-24</div>使用百分比
使用 h-full 和 h-<分数> 工具类，例如 h-1/2 和 h-2/5，为元素设置基于百分比的高度
h-full
h-9/10
h-3/4
h-1/2
h-1/3
<div class="h-full ...">h-full</div><div class="h-9/10 ...">h-9/10</div><div class="h-3/4 ...">h-3/4</div><div class="h-1/2 ...">h-1/2</div><div class="h-1/3 ...">h-1/3</div>匹配视口
使用 h-screen 工具类使元素跨越整个视口的高度
<div class="h-screen"> <!-- ... --></div>匹配动态视口
使用 h-dvh 工具类使元素跨越整个视口的高度，该高度会随着浏览器 UI 的展开或收缩而变化
滚动视口以查看视口高度的变化
<div class="h-dvh"> <!-- ... --></div>匹配大视口
使用 h-lvh 工具类将元素的高度设置为视口的最大可能高度
滚动视口以查看视口高度的变化
<div class="h-lvh"> <!-- ... --></div>匹配小视口
使用 h-svh 工具类将元素的高度设置为视口的最小可能高度
滚动视口以查看视口高度的变化
<div class="h-svh"> <!-- ... --></div>同时设置宽度和高度
使用 size-px、size-4 和 size-full 等工具类同时设置元素的宽度和高度
size-16
size-20
size-24
size-32
size-40
<div class="size-16 ...">size-16</div><div class="size-20 ...">size-20</div><div class="size-24 ...">size-24</div><div class="size-32 ...">size-32</div><div class="size-40 ...">size-40</div>使用自定义值
使用 h-[<值>] 语法 来设置高度基于完全自定义的值
<div class="h-[32rem] ..."> <!-- ... --></div>对于 CSS 变量，您也可以使用 h-(<自定义属性>) 语法
<div class="h-(--my-height) ..."> <!-- ... --></div>这只是 h-[var(<自定义属性>)] 的简写，它会自动为您添加 var() 函数。
响应式设计
前缀一个 height 工具类 带有断点变体（如 md:）以仅在中等 屏幕尺寸及以上应用该工具类
<div class="h-1/2 md:h-full ..."> <!-- ... --></div>在变体文档中了解有关使用变体的更多信息。
自定义主题
h-<数字> 和 size-<数字> h-<数字> 和 size-<数字>工具类由 --spacing 主题变量驱动，该变量可以在您自己的主题中进行自定义
@theme { --spacing: 1px; }在主题变量文档中了解有关自定义间距比例的更多信息。
