Tailwind CSS - Width

Tailwind CSS Width 是一个实用类，它提供了一种有效的内容宽度处理方法。它用于设置或操作任何 HTML 元素的宽度。

Tailwind CSS Width 类

以下是 Tailwind CSS Width 类的列表，它们提供了一种有效的内容宽度处理方法。

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: 此类用于指定最小宽度。
• w-max: 此类用于指定最大宽度。
• 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' 类。这将根据视口自动调整元素的宽度。

示例

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

<!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' 类来实现悬停时元素全宽。但需要注意的是，元素只能全宽。

示例

在此示例中，我们创建了一个悬停时全宽的元素。

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