box-sizing: border-box 能彻底解决内边距撑破容器问题——它使 width/height 包含 content、padding 和 border，内容区自动压缩，总宽严格等于设定值；默认 content-box 模式下 width 仅指内容区，padding 和 border 会额外累加导致溢出。
盒模型不是抽象概念，而是你每次写 width、padding 或 margin 时浏览器真正在算的数字——不理解它，就等于在 blind code。
为什么改了 width: 300px，盒子却宽了 340px？
因为默认是 box-sizing: content-box：这个 300px 只管内容区，不包括 padding 和 border。比如加了 padding: 20px 和 border: 5px solid，实际宽度就是 300 + 20×2 + 5×2 = 350px。
- 这是标准行为，不是 bug，但容易误判布局空间
- 尤其在响应式中，
width: 100%+padding会导致横向溢出 - 解决办法不是“少写 padding”，而是统一用
box-sizing: border-box
如何一劳永逸避免尺寸计算错误？
在 CSS 开头加这一句：
* {
box-sizing: border-box;
}
之后所有元素的 width 和 height 都指“内容 + padding + border”的总和，padding 和 border 不再撑大盒子。
- 别只给某个 class 加，
*全局重置最稳妥（现代项目基本都这么干） - 注意：IE8+ 支持，无需 polyfill
- 副作用极少，唯一要注意的是第三方组件若显式设了
content-box，可能需要局部覆盖
margin 塌陷到底是怎么回事？
两个垂直相邻块级元素的上下 margin 会“合并”成一个，取其中较大值，而不是相加。比如 margin-bottom: 20px 的 div 后面接 margin-top: 30px 的 div，实际间距只有 30px，不是 50px。
- 常见于
h2+p、section+section等自然流结构 - 不是 bug，是规范定义的行为，目的是避免段落间空隙过大
- 破除塌陷的方法：父容器触发 BFC（如加
overflow: hidden），或用padding替代margin，或只设单边margin
内边距 padding 和外边距 margin 到底该用谁？
看你要控制的是“盒子内部呼吸感”还是“盒子外部隔离感”：
-
padding：内容与边框之间留白，背景色/图会延伸进去；不能为负；影响盒子尺寸（除非border-box） -
margin：盒子与其他元素之间留空，背景色/图不会覆盖；可为负（用于微调位置或重叠）；不影响自身尺寸，但影响布局流 - 典型误用：用
margin给文字内侧留空（应改用padding）；用padding分隔两个并列按钮（应改用margin）
真正卡住人的从来不是“记不住四个部分”，而是没意识到 padding 和 border 默认会吃掉你分配给 width 的空间，以及 margin 在垂直方向上根本不会叠加——这些细节不亲手测几次，光看图永远模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
