Tailwind CSS - Box Sizing 类

Tailwind CSS 盒子尺寸 是一个实用类，它定义了元素的宽度和高度如何计算为元素的总大小。它指定了元素的内边距和边框如何包含在其宽度和高度中。

Tailwind CSS box-sizing 类

以下是 Tailwind CSS box-sizing 类列表，有效地展示了元素的宽度和高度(包括内边距和边框)的计算方式。

Tailwind CSS 盒子尺寸类的功能

• box-border: 此类替换 CSS box-sizing: border-box; 属性。将元素的效用设置为 box-border，这意味着元素的宽度和高度包含其填充和边框。
• box-content: 此类替换 CSS box-sizing: content-box; 属性。将元素的效用设置为 box-content，这意味着元素的宽度和高度不包含其填充和边框。

Tailwind CSS 盒子尺寸类示例

以下示例将说明 Tailwind CSS Box Sizing 类。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h2 class="text-3xl 
            mb-3">
        Tailwind CSS Box Sizing Classes
    </h2>
    <div class="flex">
        <div class="box-border 
                    w-32 h-32 
                    p-4 border-4 
                    bg-blue-500 
                    mr-3">
            Box Border
        </div>
        <div class="box-content 
                    w-32 h-32 
                    p-4 border-4 
                    bg-red-500">
            Box Content
        </div>
    </div>
</body>
</html>