必须全局设置 box-sizing: border-box，因 content-box 下 width+padding+border 导致隐式膨胀，多人协作中易引发溢出、换行、轨道错位等分散性问题。
大型项目中，盒模型相关样式必须全局统一计算方式，并通过命名约束作用域——否则 padding 和 border 会持续引发尺寸错乱和组件嵌套塌陷。
为什么必须全局设置 box-sizing: border-box
标准盒模型（content-box）下，width: 300px + padding: 16px + border: 1px = 实际宽度 334px，这种隐式膨胀在组件复用时极难追踪。多人协作中，有人写 width: 100%，有人加 padding，结果父容器溢出、Flex 子项换行、Grid 轨道错位，问题源头却分散在几十个文件里。
实际做法：
- 在项目最顶层 CSS 入口（如
base.css或reset.css）第一行写：* { box-sizing: border-box; } - 仅对极少数需兼容旧逻辑的元素（如内联
textarea或第三方富文本编辑器内部）显式覆盖：.legacy-editor * { box-sizing: content-box; } - 避免使用
html, body { box-sizing: border-box }这类窄范围声明——它漏掉伪元素、动态插入节点等边界情况
BEM 命名如何绑定盒模型语义
BEM 不只是“加前缀”，而是让类名直接暴露盒模型职责。比如 ui-card 是一个完整盒子，它的子类必须明确属于哪一层：
立即学习“前端免费学习笔记（深入）”；
-
ui-card__body：承担内容区（padding由它控制，不依赖父级） -
ui-card__border：单独抽离边框层（便于开关、换色、动画） -
ui-card__spacer：专用于外边距控制（margin不写在ui-card上，避免影响布局上下文）
错误示范：
.ui-card { padding: 20px; border: 1px solid #eee; margin-bottom: 16px; }——这把三类盒模型行为混在一个类里，导致无法单独关闭 padding 或复用 border 样式。
重置文件里哪些盒模型相关属性不能省
防御式重置不是清空一切，而是锁定盒模型关键变量。以下几项必须出现在 reset.css 开头（顺序不能颠倒）：
-
margin和padding归零：消除浏览器默认间距差异（如h1的上下 margin、ul的左 padding） -
border设为0：防止某些 UA 样式注入不可见边框（如 Firefox 中input[type=number]的右侧微边框） -
box-sizing显式设为border-box：覆盖所有元素，包括::before/::after - 禁用
outline但保留可访问性：用outline: 0+ 后续:focus-visible重定义聚焦样式，避免键盘导航失效
注意：font-size: 100% 和 vertical-align: baseline 也属盒模型基础——它们影响行高计算和内联元素基线对齐，间接决定高度一致性。
组件级盒模型封装的两个硬约束
当写一个 Button 或 Modal 组件时，盒模型行为必须收口，不能靠使用者“记得加 padding”：
- 所有尺寸类（如
size-sm）必须同时声明padding、border-width、font-size、line-height，四者联动才能保持视觉比例 - 外边距（
margin）永远不由组件自身声明，而是交给容器或布局工具类（如stack-sm、grid-gap-4）控制——组件只负责“自己多大”，不决定“跟谁隔多远”
最容易被忽略的是：当组件使用 display: inline-flex 或 display: grid 时，其 margin 行为与块级元素不同，且受 vertical-align 影响。这类细节必须写进组件文档，而不是靠开发者“凭经验猜”。
