盒子尺寸

​基本用法

​包括边框和内边距

使用 box-border 将元素的 box-sizing 设置为 border-box，告诉浏览器在指定高度或宽度时包括元素的边框和内边距。

这意味着一个带有 2px 边框和所有边距为 4px 的 100px × 100px 元素将被渲染为 100px × 100px，内部内容区域为 88px × 88px。

Tailwind 使这成为我们 预设基础样式 中所有元素的默认设置。

<div class="box-border h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>

​排除边框和边距

使用 box-content 将元素的 box-sizing 设置为 content-box，告诉浏览器在元素指定宽度或高度的基础上添加边框和边距。

这意味着一个带有 2px 边框和所有边距为 4px 的 100px × 100px 元素实际上将被渲染为 112px × 112px，内部内容区域为 100px × 100px。

<div class="box-content h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>

​有条件地应用

​悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:box-content 仅在悬停时应用 box-content 实用程序。

<div class="box-border hover:box-content">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看 悬停、聚焦和其他状态 文档。

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、更喜欢减少运动等。例如，使用 md:box-content 仅在中型屏幕及以上尺寸应用 box-content 实用程序。

<div class="box-border md:box-content">
  <!-- ... -->
</div>

要了解更多信息，请查看有关 响应式设计、暗模式 和 其他媒体查询修饰符 的文档。