CSS盒模型由content、padding、border、margin组成，实际尺寸受box-sizing影响；默认content-box下宽高仅含内容，border-box下包含内边距和边框，推荐全局设置border-box以提升布局一致性与控制精度。
CSS盒模型是页面布局的核心概念，直接影响元素的尺寸、位置和整体排版效果。每个HTML元素都被视为一个矩形盒子，这个盒子由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型如何工作，有助于更精准地控制页面结构。
盒模型的组成部分
每个元素的实际占用空间由以下四部分构成：
- content：元素的内容区域，如文本或图片，设置的 width 和 height 属性默认作用于此区域。
- padding：内边距，位于内容周围，增加内容与边框之间的空白，会扩大元素的视觉尺寸。
- border：边框，围绕在 padding 外侧，其宽度也计入元素总大小。
- margin：外边距，位于边框外部，用于与其他元素保持距离，不占背景色，但影响布局空间。
标准盒模型 vs 怪异盒模型
CSS提供两种盒模型计算方式，通过 box-sizing 属性控制：
- box-sizing: content-box（默认）：width 和 height 只包括 content，padding 和 border 会额外增加元素总宽高。例如，一个 width: 100px、padding: 10px、border: 5px 的元素，实际宽度为 130px（100 + 2×10 + 2×5）。
- box-sizing: border-box：width 和 height 包含 content、padding 和 border。上述例子中，元素总宽仍为 100px，内容区域自动缩小以容纳 padding 和 border。
使用 border-box 更利于响应式设计，避免因添加内边距或边框导致布局溢出。
立即学习“前端免费学习笔记（深入）”；
对布局的实际影响
盒模型直接决定元素在文档流中的占据空间，进而影响其他元素的位置：
- 外边距（margin）可能产生 外边距合并 现象，在块级元素垂直方向上，相邻元素的 margin 会取最大值而非相加，影响间距控制。
- 浮动或定位布局中，若未考虑 padding 和 border，可能导致容器溢出父元素或破坏栅格对齐。
- 弹性布局（Flexbox）或网格布局（Grid）中，元素的尺寸计算依然基于盒模型，box-sizing: border-box 能让子元素更自然地填充容器。
实用建议
为减少布局意外，推荐统一设置盒模型：
*, *::before, *::after {
box-sizing: border-box;
}
这样所有元素都按 border-box 计算尺寸，提升开发效率和一致性。
基本上就这些。掌握盒模型的本质，才能更准确地实现预期布局效果。
