尺寸调整
用于设置元素高度的实用工具。
类 | 样式 |
---|---|
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
,根据间距比例设置元素的固定高度
<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
,为元素设置基于百分比的高度
<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
等工具类同时设置元素的宽度和高度
<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; }
在主题变量文档中了解有关自定义间距比例的更多信息。