Box Sizing 盒模型
用于控制浏览器如何计算元素的总尺寸的实用工具。
| Class | Properties |
|---|
基本用法
包括边框和填充
使用 box-border 来设置元素的 box-sizing 为 border-box ，告诉浏览器在给定高度或宽度时包括元素的边框和填充。
这意味着一个带有 2px 边框和 4px 填充的 100px ×100px 元素将呈现为 100px ×100px，内部内容区域为 88px × 88px。
Tailwind 使这成为我们预设基础样式中所有元素的默认设置。
128px
128px
html
<div class="box-border h-32 w-32 p-4 border-4 ...">
<!-- ... -->
</div>不包括边框和填充
使用 box-content 来设置元素的 box-sizing 为 content-box ，告诉浏览器在指定的宽度或高度上添加边框和填充。
这意味着一个 100px × 100px 的元素，带有 2px 的边框和 4px 的填充，实际上会被渲染为 112px × 112px，内部内容区域为 100px × 100px。
128px
128px
html
<div class="box-content h-32 w-32 p-4 border-4 ...">
<!-- ... -->
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:box-content 只在悬停时应用 box-content 实用程序。
html
<div class="box-border hover:box-content">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:box-content 仅在中等屏幕尺寸及以上应用 box-content 实用程序。
html
<div class="box-border md:box-content">
<!-- ... -->
</div>