block-size

示例(Examples)

基本示例(Basic example)

使用像 block-24 和 block-64 这样的 block-<number> 工具，根据间距比例将元素设置为固定的块大小：

🌐 Use block-<number> utilities like block-24 and block-64 to set an element to a fixed block size based on the spacing scale:

<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>

使用百分比(Using a percentage)

使用 block-full 或 block-<fraction> 工具，如 block-1/2 和 block-2/5，给元素设置基于百分比的块大小：

🌐 Use block-full or block-<fraction> utilities like block-1/2 and block-2/5 to give an element a percentage-based block size:

<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>

匹配视口(Matching viewport)

使用 block-screen 工具让一个元素跨越视口的整个块大小：

🌐 Use the block-screen utility to make an element span the entire block size of the viewport:

<div class="block-screen">  <!-- ... --></div>

匹配动态视口(Matching dynamic viewport)

使用 block-dvh 工具使一个元素跨越整个视口的块大小，这个大小会随着浏览器界面的扩展或收缩而变化：

🌐 Use the block-dvh utility to make an element span the entire block size of the viewport, which changes as the browser UI expands or contracts:

<div class="block-dvh">  <!-- ... --></div>

匹配大视口(Matching large viewport)

使用 block-lvh 工具将元素的块级大小设置为视口的最大可能大小：

🌐 Use the block-lvh utility to set an element's block size to the largest possible size of the viewport:

<div class="block-lvh">  <!-- ... --></div>

匹配小视口(Matching small viewport)

使用 block-svh 工具将元素的块大小设置为视口的最小可能大小：

🌐 Use the block-svh utility to set an element's block size to the smallest possible size of the viewport:

<div class="block-svh">  <!-- ... --></div>

使用自定义值(Using a custom value)

使用 block-[<value>] 语法 根据完全自定义的值设置 block size：

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

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

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

这只是简写，用于 block-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

在 block-size 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

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

@theme {  --spacing: 1px; }

在主题变量文档中了解有关自定义间距比例的更多信息。