Tailwind CSS - 尺寸

上一页
下一页

Tailwind CSS 尺寸是一个实用程序类，提供了一种有效处理内容高度和宽度的方法。它用于设置高度和宽度或操作它们。

Tailwind CSS 尺寸类

以下是提供有效处理内容高度和宽度方法的Tailwind CSS 尺寸类列表。

类名 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 宽度：11rem；/* 176px */
高度：11rem；/* 176px */
size-48 宽度：12rem；/* 192px */
高度：12rem；/* 192px */
size-52 宽度：13rem；/* 208px */
高度：13rem；/* 208px */
size-56 宽度：14rem；/* 224px */
高度：14rem；/* 224px */
size-60 宽度：15rem；/* 240px */
高度：15rem；/* 240px */
size-64 宽度：16rem；/* 256px */
高度：16rem；/* 256px */
size-72 宽度：18rem；/* 288px */
高度：18rem；/* 288px */
size-80 宽度：20rem；/* 320px */
高度：20rem；/* 320px */
size-96 宽度：24rem；/* 384px */
高度：24rem；/* 384px */
size-auto 宽度：auto;
高度：auto;
size-1/2 宽度：50%;
高度：50%;
size-1/3 宽度：33.333333%;
高度：33.333333%;
size-2/3 宽度：66.666667%;
高度：66.666667%;
size-1/4 宽度：25%;
高度：25%;
size-2/4 宽度：50%;
高度：50%;
size-3/4 宽度：75%;
高度：75%;
size-1/5 宽度：20%;
高度：20%;
size-2/5 宽度：40%;
高度：40%;
size-3/5 宽度：60%;
高度：60%;
size-4/5 宽度：80%;
高度：80%;
size-1/6 宽度：16.666667%;
高度：16.666667%;
size-2/6 宽度：33.333333%;
高度：33.333333%;
size-3/6 宽度：50%;
高度：50%;
size-4/6 宽度：66.666667%;
高度：66.666667%;
size-5/6 宽度：83.333333%;
高度：83.333333%;
size-1/12 宽度：8.333333%;
高度：8.333333%;
size-2/12 宽度：16.666667%;
高度：16.666667%;
size-3/12 宽度：25%;
高度：25%;
size-4/12 宽度：33.333333%;
高度：33.333333%;
size-5/12 宽度：41.666667%;
高度：41.666667%;
size-6/12 宽度：50%;
高度：50%;
size-7/12 宽度：58.333333%;
高度：58.333333%;
size-8/12 宽度：66.666667%;
高度：66.666667%;
size-9/12 宽度：75%;
高度：75%;
size-10/12 宽度：83.333333%;
高度：83.333333%;
size-11/12 宽度：91.666667%;
高度：91.666667%;
size-full 宽度：100%;
高度：100%;
size-min 宽度：min-content;
高度：min-content;
size-max 宽度：max-content;
高度：max-content;
size-fit 宽度：fit-content;
高度：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 尺寸类示例

以下示例将说明 Tailwind CSS 尺寸类实用程序。

定义固定尺寸

要定义固定尺寸，我们可以使用诸如`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`。

示例

在此示例中，当屏幕尺寸为中等时，我们将元素上的指定尺寸重置为 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>
打印页面
上一页
下一页
广告