盒子模型由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 默认非零（如 <p> 有上下 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永远不会折叠，也不会塌陷，它老老实实增加盒子自身尺寸 - 行内元素（如
<span>）的margin-top/bottom无效，但padding有效（只是不推挤其他行内元素）
边框不是“装饰线”，它参与布局计算且影响渲染性能
border 不仅决定视觉边界，还直接影响盒子尺寸、圆角渲染（border-radius）、甚至是否触发硬件加速（比如带 border 的元素更易被提升为独立图层）。
- 避免用
border: 1px solid transparent占位——它仍参与 layout 计算，且可能引发重排 - 单边隐藏别写
border-bottom: none，而应直接移除该声明，减少 CSS 解析开销 - 虚线/点线边框（
dashed/dotted）比实线（solid）渲染成本略高，高频动画中慎用
真正卡住人的从来不是记不住四层名字，而是改了 padding 却忘了调 width，写了 margin 却没意识到它正在和上一个元素悄悄合并——盒子模型的“模型”二字，强调的是它是一套**可预测、可计算、有副作用**的物理系统，不是画布上的静态图层。
