<p>默认 box-sizing: content-box 导致 width 仅指内容区，加上 padding 和 border 后总宽为 242px；推荐全局设 * { box-sizing: border-box; } 统一预期。</p>
width 设了 200px，结果元素宽 242px？这是 content-box 的默认行为
新手最常懵的点：明明写了 width: 200px，加了 padding: 20px 和 border: 1px solid，一测发现实际占位是 242px。这不是 bug，是 W3C 标准盒模型（box-sizing: content-box）的本意——width 只管内容区，padding 和 border 得额外加。
- 总宽度 =
width+ 左右padding+ 左右border+ 左右margin - height 同理，垂直方向也一样“偷偷加高”
- 用 Chrome DevTools 的“Computed”面板点开盒模型图示，能立刻看到四层尺寸拆分
子元素 width: 100% + padding 导致父容器溢出滚动条
典型翻车场景：父容器设了 width: 100%，子元素也写 width: 100% 再加 padding: 15px，结果横向出现滚动条，布局错位。
- 原因：content-box 下，
100%指父容器 content 宽度，padding 是额外加在它外面的 - 解决不是靠“调小 width”，而是统一用
box-sizing: border-box - 推荐做法：全局重置，避免漏写
* { box-sizing: border-box; }
两个 div 垂直挨着，margin-top 和 margin-bottom 却“合并”成一个值
这就是 margin collapsing（外边距折叠）：相邻块级元素的垂直 margin 不叠加，而是取其中较大者。比如上元素 margin-bottom: 30px，下元素 margin-top: 20px，实际间距只有 30px，不是 50px。
- 只发生在垂直方向（上下），左右 margin 不会折叠
- 父子嵌套时也可能发生 margin 传递（子元素 top margin “顶穿”父容器）
- 常见解法：
overflow: hidden、display: flow-root或给父容器加border/padding
百分比 padding 居然按父容器宽度算高度？没错，这是规范
写 padding-top: 20%，结果发现高度随父容器宽度变化，而不是自身高度——这不是浏览器 bug，是 CSS 规范明确规定的：所有方向的百分比 padding 和 margin（除 margin 的 left/right 在某些旧环境外）都基于父容器的 宽度 计算。
立即学习“前端免费学习笔记（深入）”；
- 想实现等比例缩放的正方形容器？可以利用这个特性：
padding-top: 100%+height: 0+ 绝对定位子元素 - 但别指望它响应自身 height 变化；若需真正按高度算，请改用
calc()或 JS 动态设置 - flex/grid 容器中该行为不变，但布局上下文可能掩盖问题
实际开发中，最省心的起点就是那行 * { box-sizing: border-box; }——它不改变逻辑，只把“宽度预期”和“代码所见”对齐。其余坑，基本都是忘了它，或没意识到 margin 和 padding 在盒模型里根本不是“装饰”，而是参与空间计算的硬性组成部分。
