笙亿网络策划

Tailwind CSS 宽度怎么设置？width类有哪些实用用法？

约 12 分钟读完 34 阅
文章导读
Previous Quiz Next Tailwind CSS Width 是一个 utility class，它提供了一种有效的方式来处理内容宽度。此类用于设置或操纵任何 HTML 元素的宽度。
📋 目录
  1. A Tailwind CSS 宽度类
  2. B Tailwind CSS 宽度类功能
  3. C Tailwind CSS 宽度类示例
  4. D 定义固定宽度
  5. E 指定百分比宽度
  6. F 基于视口宽度定义宽度
  7. G 基于 Hover 的全宽
A A

Tailwind CSS - Width

Previous
Quiz
Next

Tailwind CSS Width 是一个 utility class，它提供了一种有效的方式来处理内容宽度。此类用于设置或操纵任何 HTML 元素的宽度。

Tailwind CSS 宽度类

以下是 Tailwind CSS Width 类列表，这些类提供了一种有效的方式来处理内容宽度。

Class CSS Properties
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5 width: 0.375rem; /* 6px */
w-2 width: 0.5rem; /* 8px */
w-2.5 width: 0.625rem; /* 10px */
w-3 width: 0.75rem; /* 12px */
w-3.5 width: 0.875rem; /* 14px */
w-4 width: 1rem; /* 16px */
w-5 width: 1.25rem; /* 20px */
w-6 width: 1.5rem; /* 24px */
w-7 width: 1.75rem; /* 28px */
w-8 width: 2rem; /* 32px */
w-9 width: 2.25rem; /* 36px */
w-10 width: 2.5rem; /* 40px */
w-11 width: 2.75rem; /* 44px */
w-12 width: 3rem; /* 48px */
w-14 width: 3.5rem; /* 56px */
w-16 width: 4rem; /* 64px */
w-20 width: 5rem; /* 80px */
w-24 width: 6rem; /* 96px */
w-28 width: 7rem; /* 112px */
w-32 width: 8rem; /* 128px */
w-36 width: 9rem; /* 144px */
w-40 width: 10rem; /* 160px */
w-44 width: 11rem; /* 176px */
w-48 width: 12rem; /* 192px */
w-52 width: 13rem; /* 208px */
w-56 width: 14rem; /* 224px */
w-60 width: 15rem; /* 240px */
w-64 width: 16rem; /* 256px */
w-72 width: 18rem; /* 288px */
w-80 width: 20rem; /* 320px */
w-96 width: 24rem; /* 384px */
w-auto width: auto;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-2/3 width: 66.666667%;
w-1/4 width: 25%;
w-2/4 width: 50%;
w-3/4 width: 75%;
w-1/5 width: 20%;
w-2/5 width: 40%;
w-3/5 width: 60%;
w-4/5 width: 80%;
w-1/6 width: 16.666667%;
w-2/6 width: 33.333333%;
w-3/6 width: 50%;
w-4/6 width: 66.666667%;
w-5/6 width: 83.333333%;
w-1/12 width: 8.333333%;
w-2/12 width: 16.666667%;
w-3/12 width: 25%;
w-4/12 width: 33.333333%;
w-5/12 width: 41.666667%;
w-6/12 width: 50%;
w-7/12 width: 58.333333%;
w-8/12 width: 66.666667%;
w-9/12 width: 75%;
w-10/12 width: 83.333333%;
w-11/12 width: 91.666667%;
w-full width: 100%;
w-screen width: 100vw;
w-svw width: 100svw;
w-lvw width: 100lvw;
w-dvw width: 100dvw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content;

Tailwind CSS 宽度类功能

  • w-*: 此类指定宽度，并可以设置特定长度。* 可以替换为表格中提到的任何有效值。
  • min-px: 此类将宽度指定为 1px 值。
  • w-auto: 此类指定宽度根据内容设置
  • w-1/2: 此类指定宽度设置为窗口的一半。
  • w-1/3: 此类指定宽度设置为窗口的三分之一。
  • w-1/4: 此类指定宽度设置为窗口的四分之一。
  • w-1/5: 此类指定宽度设置为窗口的五分之一。
  • w-1/6: 此类指定宽度设置为窗口的六分之一。
  • w-1/12: 此类指定宽度设置为窗口的十二分之一。
  • w-full: 此类指定宽度设置为全宽。
  • w-screen: 此类指定宽度设置为屏幕尺寸。
  • w-svh: 此类将元素的宽度设置为 100 svw。
  • w-lvh: 此类将元素的宽度设置为 100 lvh。
  • w-dvh: 此类将元素的宽度设置为 100 dvh
  • w-min: 此类用于指定 min-width。
  • w-max: 此类用于指定 max-width。
  • w-fit: 此类将宽度设置为适应父容器中的内容。

Tailwind CSS 宽度类示例

以下示例将演示 Tailwind CSS 宽度类实用程序。

定义固定宽度

要定义固定宽度，可以使用如 'w-px', 'w-1' 和 'w-24' 等类。从上表中可以使用任何有效的数值值 (w-*) 来创建固定宽度元素。

示例

在本示例中，我们将创建多个元素，并为每个元素设置不同的固定宽度。

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="w-44 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-44</div>
        <div class="w-40 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-40</div>
        <div class="w-36 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-36</div>
        <div class="w-32 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-32</div>
        <div class="w-28 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-28</div>
        <div class="w-24 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-24</div>
</body>

</html>

指定百分比宽度

指定百分比宽度意味着该元素的宽度完全取决于父元素的宽度。通过使用 'w-full'、'w-1/2' 和 'w-2/5'，我们可以设置元素的宽度。

示例

在本示例中，我们将创建多个元素，并为每个元素设置不同的百分比宽度。

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="w-1/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-1/12</div>
        <div class="w-2/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-2/12</div>
        <div class="w-3/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-3/12</div>
        <div class="w-4/12 bg-green-400 h-12 
                    rounded-lg text-center m-2">w-4/12</div>
        
</body>

</html>

基于视口宽度定义宽度

要根据视口宽度设置元素的宽度，我们可以使用 'w-screen' class。这将根据视口自动调整元素的宽度。

示例

在本示例中，我们将创建两个元素，在第一个元素中使用 'w-screen' class，并在第二个元素留空。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="w-screen bg-green-400 h-12 
                    rounded-lg text-center m-2">w-1/12</div>
        <div class="bg-green-400 h-12 
                    rounded-lg text-center m-2"></div>
</body>

</html>

基于 Hover 的全宽

要在 hover 时设置元素全宽，可以使用 'hover' class。但需要注意一点，只能实现全宽效果。

示例

在本示例中，我们创建了一个在 hover 时占据全宽的元素。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Width Class
    </h2>
        <div class="flex text-center">
        <div class="w-1/6 hover:w-full 
                    bg-green-600 h-12 rounded-lg">
            Hover over Me
        </div>
        </div>
    </div>
</body>

</html>