Tailwind CSS - 盒子大小



Tailwind CSS 盒子大小是一个实用程序类,用于定义元素的宽度和高度是如何计算为元素的总大小的。它指定元素的内填充和边框是如何包含在其宽度和高度中的。

Tailwind CSS 盒子大小类

以下是Tailwind CSS 盒子大小类列表,有效地显示了元素的宽度和高度是如何计算的,包括内填充和边框。

CSS 属性
box-border box-sizing: border-box;
box-content box-sizing: content-box;

Tailwind CSS 盒子大小类的功能

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 盒子大小类示例

下面的示例将说明 Tailwind CSS 盒子大小类。

示例

Open Compiler
<!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>
广告