17370845950

默认 box-sizing: content-box 导致 width 仅指内容区，加上 padding 和 border 后总宽为 242px；推荐全局设 * { box-sizing: border-box; } 统一预期。

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 在盒模型里根本不是“装饰”，而是参与空间计算的硬性组成部分。