盒子模型由content、padding、border、margin四层构成，浏览器渲染时天然存在；标准模型下width仅指content宽度，实际尺寸需加上padding和border；box-sizing: border-box可使width包含padding和border。

盒子模型的四层结构：content、padding、border、margin

CSS 盒子模型就是每个元素在页面中占据的矩形空间，它由内到外严格分为四层：content（内容区）、padding（内边距）、border（边框）、margin（外边距）。这四层不是可选配置，而是浏览器渲染时**天然存在**的布局单元——哪怕你没写任何样式，它们也都在那儿。

常见误解是以为“没设 padding 就没有内边距”，其实默认值是 0，不是“不存在”。同理，border 默认为 none，但它的位置和计算逻辑仍在；margin 默认非零（如

为什么总宽度/高度经常“算不准”？标准模型 vs box-sizing

默认使用的是**标准盒子模型**：你写的 width: 200px 仅代表 content 宽度，不包含 padding 和 border。所以当设置：

div {
  width: 200px;
  padding: 10px;
  border: 3px solid #000;
}

该 div 实际占用的水平空间是 200 + 10×2 + 3×2 = 226px。很多布局错位、响应式失效，根源就在这里。

• 想让 width 包含 padding 和 border？加一句：box-sizing: border-box
• 全局重置推荐写法：* { box-sizing: border-box; }（注意：伪元素需单独加）
• box-sizing: content-box 是默认值，显式写出仅用于覆盖或调试

padding 和 margin 看似相似，行为却截然不同

padding 是“往里撑”，影响背景色、阴影、点击热区；margin 是“往外推”，透明且不继承背景，但会触发**外边距折叠（margin collapse）**——这是最常踩的坑。

• 垂直方向相邻块级元素的 margin-top 和 margin-bottom 会合并为两者中较大的那个值，而不是相加
• padding 永远不会折叠，也不会塌陷，它老老实实增加盒子自身尺寸
• 行内元素（如 ）的 margin-top/bottom 无效，但 padding 有效（只是不推挤其他行内元素）

边框不是“装饰线”，它参与布局计算且影响渲染性能

border 不仅决定视觉边界，还直接影响盒子尺寸、圆角渲染（border-radius）、甚至是否触发硬件加速（比如带 border 的元素更易被提升为独立图层）。

• 避免用 border: 1px solid transparent 占位——它仍参与 layout 计算，且可能引发重排
• 单边隐藏别写 border-bottom: none，而应直接移除该声明，减少 CSS 解析开销
• 虚线/点线边框（dashed/dotted）比实线（solid）渲染成本略高，高频动画中慎用

真正卡住人的从来不是记不住四层名字，而是改了 padding 却忘了调 width，写了 margin 却没意识到它正在和上一个元素悄悄合并——盒子模型的“模型”二字，强调的是它是一套**可预测、可计算、有副作用**的物理系统，不是画布上的静态图层。