统一盒模型通过设置 box-sizing: border-box 可解决 CSS 组件样式复用时的尺寸错乱问题，使 width/height 包含 padding 和 border，配合 rem、max-width 与原子类固化可提升响应式一致性。
统一盒模型是解决 CSS 组件样式复用困难最直接有效的方式之一。默认情况下，box-sizing: content-box 会让 width/height 仅作用于内容区，而 padding 和 border 会额外增加元素实际尺寸，导致在不同组件中复用同一 class 时布局错乱、尺寸不可控。
把 box-sizing 设为 border-box 是基础动作
全局设置可避免后续反复覆盖：
- 在项目入口 CSS 或重置样式中加入：
* { box-sizing: border-box; } - 若需兼容旧版 IE（如 IE8），可加 vendor 前缀：
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - 注意：伪元素也要继承，所以通配符 * 是稳妥选择；个别需要 content-box 的场景再单独覆盖即可
组件内部不再假设“width 就是总宽”
采用 border-box 后，声明 width: 100%; padding: 16px; border: 1px solid #ccc; 时，元素总宽度仍为 100%，不会溢出容器。这对按钮、输入框、卡片等高频复用组件尤其关键：
- 按钮组件定义
.btn { width: 100%; padding: 8px 16px; }，嵌入不同父容器时表现一致 - 表单字段组件可安全使用
flex: 1+ 固定内边距，无需为适配留白反复调整 width - 栅格系统中，
col-6类无论是否带 padding/border，都能精准占满半行
配合 rem/vw + max-width 控制响应式伸缩边界
仅靠 border-box 不足以应对所有复用场景。建议搭配弹性单位与约束：
立即学习“前端免费学习笔记（深入）”；
- 用
rem定义 padding/margin，确保缩放一致性（如padding: 0.5rem 1rem;） - 对卡片、模态框等独立组件，加
max-width: 100%; width: fit-content;防止在窄屏下横向溢出 - 媒体查询中优先调整 padding 和 font-size，而非重写 width —— 因为 border-box 已让尺寸逻辑归一
封装原子类时显式声明 box-sizing
如果使用原子 CSS（如 Tailwind）或自建工具类库，务必在尺寸相关类中固化 box-sizing：
- 例如
.p-4应包含box-sizing: border-box;，否则与其他含 border 的类组合时可能失效 - 避免写
.w-full.p-4.border后发现总宽超 100%，本质是未统一盒模型语义 - 可通过 PostCSS 插件自动注入，或在设计系统文档中明确标注“所有间距/尺寸类均基于 border-box”
