box-sizing: border-box 可解决网页布局中因边框和内边距导致的尺寸失控问题，使 width 和 height 包含内容、padding 和边框；默认的 content-box 模式下，padding 和 border 会额外增加元素总尺寸，易造成表格或卡片布局溢出；通过设置 table 或 card 元素的 box-sizing 为 border-box，可确保元素宽度包含内边距和边框，避免撑破容器；推荐全局统一设置 ,::before,*::after { box-sizing: border-box; } 以实现一致的尺寸控制；应用于表格时结合 border-collapse: collapse 可防止边框叠加超宽；用于卡片时即使添加 padding 和边框，设定宽度仍保持不变；需注意避免混合使用不同 box-sizing 值，检查第三方组件样式冲突，并在使用 CSS Reset 时确认其处理方式；现代浏览器普遍支持该属性，合理应用能显著提升布局精度与响应式设计稳定性。
在网页布局中，表格和卡片元素的尺寸控制常因边框、内边距影响而难以精确把控。使用 box-sizing 属性可以有效解决这一问题，让元素的宽度和高度包含内容、内边距和边框，从而实现更直观的尺寸管理。
理解 box-sizing 的作用
CSS 默认的 box-sizing: content-box 模式下，元素的 width 和 height 只包含内容区域，padding 和 border 会额外增加总尺寸。这在设计表格或卡片时容易导致布局溢出或错位。
将 box-sizing 设置为 border-box 后，width 和 height 包含内容、padding 和 border，使尺寸更可控。
常见取值：- content-box：默认值，width/height 不包含 padding 和 border
- border-box：width/height 包含 content、padding 和 border
对表格元素的应用
表格（table）在默认样式下可能因单元格边框叠加导致整体宽度超出容器。通过设置 box-sizing: border-box，可确保表格总宽符合预期。
立即学习“前端免费学习笔记（深入）”；
示例代码：
table {
width: 100%;
border-collapse: collapse;
box-sizing: border-box;
}
th, td {
box-sizing: border-box;
padding: 10px;
border: 1px solid #ccc;
}
这样即使添加 padding 或边框，单元格也不会撑破父容器。
对卡片元素的统一控制
卡片通常包含图片、标题、描述和按钮，常使用 padding 留白并加边框装饰。若不设置 border-box，实际宽度会大于设定值。
推荐做法是全局设置所有元素使用 border-box：
*,
*::before,
*::after {
box-sizing: border-box;
}
之后定义卡片样式时，无需担心内边距或边框导致溢出：
.card {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
此时 card 的总宽度仍为 300px，布局更稳定。
注意事项与兼容性
虽然现代浏览器普遍支持 box-sizing，但仍需注意以下几点：
- 避免混合使用 content-box 和 border-box 导致计算混乱
- 某些第三方组件可能重置 box-sizing，需检查覆盖
- 使用 CSS Reset 或 Normalize.css 时确认其对 box-sizing 的处理
基本上就这些。合理使用 box-sizing: border-box 能大幅简化布局计算，尤其在响应式设计中表现更可靠。
