Tailwind CSS - Size
Tailwind CSS Size 是一个实用类，它提供了一种有效处理内容高度和宽度的方法。它用于设置或修改高度和宽度。
Tailwind CSS Size 类
以下是 Tailwind CSS Size 类的列表，这些类提供了一种有效处理内容高度和宽度的方法。
| 类 | CSS 属性 |
|---|---|
| size-0 | width: 0px; height: 0px; |
| size-px | width: 1px; height: 1px; |
| size-0.5 | width: 0.125rem; /* 2px */ height: 0.125rem; /* 2px */ |
| size-1 | width: 0.25rem; /* 4px */ height: 0.25rem; /* 4px */ |
| size-1.5 | width: 0.375rem; /* 6px */ height: 0.375rem; /* 6px */ |
| size-2 | width: 0.5rem; /* 8px */ height: 0.5rem; /* 8px */ |
| size-2.5 | width: 0.625rem; /* 10px */ height: 0.625rem; /* 10px */ |
| size-3 | width: 0.75rem; /* 12px */ height: 0.75rem; /* 12px */ |
| size-3.5 | width: 0.875rem; /* 14px */ height: 0.875rem; /* 14px */ |
| size-4 | width: 1rem; /* 16px */ height: 1rem; /* 16px */ |
| size-5 | width: 1.25rem; /* 20px */ height: 1.25rem; /* 20px */ |
| size-6 | width: 1.5rem; /* 24px */ height: 1.5rem; /* 24px */ |
| size-7 | width: 1.75rem; /* 28px */ height: 1.75rem; /* 28px */ |
| size-8 | width: 2rem; /* 32px */ height: 2rem; /* 32px */ |
| size-9 | width: 2.25rem; /* 36px */ height: 2.25rem; /* 36px */ |
| size-10 | width: 2.5rem; /* 40px */ height: 2.5rem; /* 40px */ |
| size-11 | width: 2.75rem; /* 44px */ height: 2.75rem; /* 44px */ |
| size-12 | width: 3rem; /* 48px */ height: 3rem; /* 48px */ |
| size-14 | width: 3.5rem; /* 56px */ height: 3.5rem; /* 56px */ |
| size-16 | width: 4rem; /* 64px */ height: 4rem; /* 64px */ |
| size-20 | width: 5rem; /* 80px */ height: 5rem; /* 80px */ |
| size-24 | width: 6rem; /* 96px */ height: 6rem; /* 96px */ |
| size-28 | width: 7rem; /* 112px */ height: 7rem; /* 112px */ |
| size-32 | width: 8rem; /* 128px */ height: 8rem; /* 128px */ |
| size-36 | width: 9rem; /* 144px */ height: 9rem; /* 144px */ |
| size-40 | width: 10rem; /* 160px */ height: 10rem; /* 160px */ |
| size-44 | width: 11rem; /* 176px */ height: 11rem; /* 176px */ |
| size-48 | width: 12rem; /* 192px */ height: 12rem; /* 192px */ |
| size-52 | width: 13rem; /* 208px */ height: 13rem; /* 208px */ |
| size-56 | width: 14rem; /* 224px */ height: 14rem; /* 224px */ |
| size-60 | width: 15rem; /* 240px */ height: 15rem; /* 240px */ |
| size-64 | width: 16rem; /* 256px */ height: 16rem; /* 256px */ |
| size-72 | width: 18rem; /* 288px */ height: 18rem; /* 288px */ |
| size-80 | width: 20rem; /* 320px */ height: 20rem; /* 320px */ |
| size-96 | width: 24rem; /* 384px */ height: 24rem; /* 384px */ |
| size-auto | width: auto; height: auto; |
| size-1/2 | width: 50%; height: 50%; |
| size-1/3 | width: 33.333333%; height: 33.333333%; |
| size-2/3 | width: 66.666667%; height: 66.666667%; |
| size-1/4 | width: 25%; height: 25%; |
| size-2/4 | width: 50%; height: 50%; |
| size-3/4 | width: 75%; height: 75%; |
| size-1/5 | width: 20%; height: 20%; |
| size-2/5 | width: 40%; height: 40%; |
| size-3/5 | width: 60%; height: 60%; |
| size-4/5 | width: 80%; height: 80%; |
| size-1/6 | width: 16.666667%; height: 16.666667%; |
| size-2/6 | width: 33.333333%; height: 33.333333%; |
| size-3/6 | width: 50%; height: 50%; |
| size-4/6 | width: 66.666667%; height: 66.666667%; |
| size-5/6 | width: 83.333333%; height: 83.333333%; |
| size-1/12 | width: 8.333333%; height: 8.333333%; |
| size-2/12 | width: 16.666667%; height: 16.666667%; |
| size-3/12 | width: 25%; height: 25%; |
| size-4/12 | width: 33.333333%; height: 33.333333%; |
| size-5/12 | width: 41.666667%; height: 41.666667%; |
| size-6/12 | width: 50%; height: 50%; |
| size-7/12 | width: 58.333333%; height: 58.333333%; |
| size-8/12 | width: 66.666667%; height: 66.666667%; |
| size-9/12 | width: 75%; height: 75%; |
| size-10/12 | width: 83.333333%; height: 83.333333%; |
| size-11/12 | width: 91.666667%; height: 91.666667%; |
| size-full | width: 100%; height: 100%; |
| size-min | width: min-content; height: min-content; |
| size-max | width: max-content; height: max-content; |
| size-fit | width: fit-content; height: fit-content; |
Tailwind CSS 尺寸类的功能
- size-*:指定高度和宽度，并可设置具体的长度。 * 可以替换为表中列出的任何可接受的值。
- min-px: 指定高度和宽度为 1px 值。
- size-auto: 指定高度和宽度根据内容设置。
- size-1/2: 指定高度和宽度设置为窗口的一半。
- size-1/3: 指定高度和宽度设置为窗口的三分之一。
- size-1/4: 指定高度和宽度设置为窗口的四分之一。
- size-1/5: 指定高度和宽度设置为窗口的五分之一。
- size-1/6: 指定高度和宽度设置为窗口的六分之一窗口。
- size-1/12: 指定高度和宽度设置为窗口的十二分之一。
- size-full: 指定高度和宽度设置为全尺寸。
- size-min: 此类用于指定最小高度和最小宽度。
- size-max: 此类用于指定最大高度和最大宽度。
- size-fit: 此类设置高度和宽度，以使内容适合父级。
Tailwind CSS Size 类示例
以下示例将说明 Tailwind CSS Size 类的实用功能。
定义固定大小
要定义固定大小，我们可以使用类似 `size-px` 的类， `size-1` 和 `size-24` 类。可以使用上表中任何有效的数值 (w-*) 来同时创建固定高度和宽度。
示例
在此示例中，我们将创建五个元素，并为每个元素设置不同的固定大小类。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-2">
Tailwind CSS Size Class
</h2>
<div class="flex text-center space-x-1 bg-green-100 p-4">
<div class="size-16 bg-green-400
rounded-lg">size-16</div>
<div class="size-20 bg-green-400
rounded-lg">size-20</div>
<div class="size-24 bg-green-400
rounded-lg">size-24</div>
<div class="size-32 bg-green-400
rounded-lg">size-32</div>
<div class="size-40 bg-green-400
rounded-lg">size-40</div>
</div>
</body>
</html>
定义百分比大小
在任何元素上设置百分比值有时很有用，因为它会根据窗口大小调整高度和宽度。
示例
在此示例中，我们将使用一些完全依赖于窗口大小的类。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-2">
Tailwind CSS Size Class
</h2>
<div class="text-center size-full
space-y-1 bg-green-100 p-4">
<div class="size-1/2 bg-green-400
rounded-lg">size-1/2</div>
<div class="size-1/3 bg-green-400
rounded-lg">size-1/3</div>
<div class="size-1/4 bg-green-400
rounded-lg">size-1/4</div>
<div class="size-1/5 bg-green-400
rounded-lg">size-1/5</div>
<div class="size-1/6 bg-green-400
rounded-lg">size-1/6</div>
<div class="size-full bg-green-400
rounded-lg">size-1/12</div>
</div>
</body>
</html>
重置元素大小
有时我们需要根据屏幕尺寸重置元素的大小。假设我们想在窗口尺寸为中等时重置大小，那么我们可以在中等屏幕上使用 `size-auto` 属性。
示例
在此示例中，我们将在屏幕尺寸为中等时将元素的指定大小重置为自动。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl mb-2">
Tailwind CSS Size Class
</h2>
<div class="size-4/6 md:size-auto
bg-green-400 rounded-lg p-2">
When the screen size will be medium
then size of this element will be
auto adjusted based on the content.
</div>
<br>
</div>
</body>
</html>
