布局
用于控制浏览器如何计算元素总尺寸的工具类。
Class | Styles |
---|---|
box-border | box-sizing: border-box |
box-content | box-sizing: content-box |
使用 box-border
工具类将元素的 box-sizing
设置为 border-box
,告诉浏览器在设置元素高度或宽度时包含边框和内边距。
这意味着一个带有 2px 边框和四周 4px 内边距的 100px × 100px 元素,最终渲染尺寸仍为 100px × 100px,内部内容区域为 88px × 88px:
<div class="box-border size-32 border-4 p-4 ..."> <!-- ... --></div>
Tailwind 在我们的 preflight 基础样式 中默认对所有元素应用此设置。
使用 box-content
工具类将元素的 box-sizing
设置为 content-box
,告诉浏览器在元素指定的宽度或高度基础上额外添加边框和内边距。
这意味着一个 100px × 100px 的元素,如果四周有 2px 的边框和 4px 的内边距,实际渲染尺寸将是 112px × 112px,内部内容区域保持 100px × 100px:
<div class="box-content size-32 border-4 p-4 ..."> <!-- ... --></div>
Prefix a box-sizing
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="box-content md:box-border ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.