block-size

用于设置元素块向尺寸的工具类。

快速参考

类	属性
block-<number>	block-size: calc(var(--spacing) * <number>);
block-<fraction>	block-size: calc(<fraction> * 100%);
block-auto	block-size: auto;
block-px	block-size: 1px;
block-full	block-size: 100%;
block-screen	block-size: 100vh;
block-dvh	block-size: 100dvh;
block-dvw	block-size: 100dvw;
block-lvh	block-size: 100lvh;
block-lvw	block-size: 100lvw;
block-svh	block-size: 100svh;
block-svw	block-size: 100svw;
block-min	block-size: min-content;
block-max	block-size: max-content;
block-fit	block-size: fit-content;
block-lh	block-size: 1lh;
block-(<custom-property>)	block-size: var(<custom-property>);
block-[<value>]	block-size: <value>;

示例

基础示例

使用 block-<number> 这类工具类（如 block-24 和 block-64）按间距比例将元素设为固定块向尺寸：

block-96

block-80

block-64

block-48

block-40

block-32

block-24

<!-- [!code classes:block-96,block-80,block-64,block-48,block-40,block-32,block-24] -->
<div class="block-96 ...">block-96</div>
<div class="block-80 ...">block-80</div>
<div class="block-64 ...">block-64</div>
<div class="block-48 ...">block-48</div>
<div class="block-40 ...">block-40</div>
<div class="block-32 ...">block-32</div>
<div class="block-24 ...">block-24</div>

使用百分比

使用 block-full 或 block-<fraction> 这类工具类（如 block-1/2 和 block-2/5）为元素设置基于百分比的块向尺寸：

block-full

block-9/10

block-3/4

block-1/2

block-1/3

<!-- [!code classes:block-9/10,block-3/4,block-1/2,block-1/3,block-full] -->
<div class="block-full ...">block-full</div>
<div class="block-9/10 ...">block-9/10</div>
<div class="block-3/4 ...">block-3/4</div>
<div class="block-1/2 ...">block-1/2</div>
<div class="block-1/3 ...">block-1/3</div>

匹配视口

使用 block-screen 工具类让元素占满整个视口的块向尺寸：

<!-- [!code classes:block-screen] -->
<div class="block-screen">
  <!-- ... -->
</div>

匹配动态视口

使用 block-dvh 工具类让元素占满整个视口的块向尺寸，该尺寸会随浏览器界面的展开或收起而变化：

<!-- [!code classes:block-dvh] -->
<div class="block-dvh">
  <!-- ... -->
</div>

匹配大视口

使用 block-lvh 工具类将元素的块向尺寸设为视口可能的最大尺寸：

<!-- [!code classes:block-lvh] -->
<div class="block-lvh">
  <!-- ... -->
</div>

匹配小视口

使用 block-svh 工具类将元素的块向尺寸设为视口可能的最小尺寸：

<!-- [!code classes:block-svh] -->
<div class="block-svh">
  <!-- ... -->
</div>

使用自定义值

使用 block-[<value>] 这类工具类，按完全自定义的值设置块向尺寸：

<div class="block-[32rem] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 block-(<custom-property>) 语法：

<div class="block-(--my-block-size) ...">
 <!-- ... -->
</div>

这只是 block-[var(<custom-property>)] 的简写，会自动帮你加上 var() 函数。

响应式设计

在 block-size 工具类前加上 md: 这样的断点变体，即可仅在中等及以上屏幕尺寸下应用该工具类：

<div class="block-1/2 md:block-full ...">
 <!-- ... -->
</div>

在 变体文档 中了解更多关于使用变体的信息。

自定义主题

block-<number> 工具类由 --spacing 主题变量驱动，你可以在自己的主题中自定义它：

@theme {
  --spacing: 1px;
}

在 主题变量文档 中了解如何自定义间距比例。