CSS盒模型由内容、内边距、边框和外边距组成，包含标准（content-box）和IE（border-box）两种计算方式，前者width仅含内容，后者width包含内容、内边距和边框，现代开发常全局设为border-box以提升布局可控性。
CSS盒模型是网页布局的核心概念之一，它定义了每个HTML元素在页面中所占据的空间结构。理解盒模型对精准控制页面排版、尺寸计算至关重要。
CSS盒模型的基本结构
每一个HTML元素都被视为一个矩形盒子，这个盒子由四个部分组成，从内到外分别是：内容区（content）、内边距（padding）、边框（border） 和 外边距（margin）。
- 内容区（content）：显示文本、图片等内容的区域，其大小由 width 和 height 决定。
- 内边距（padding）：内容与边框之间的空白区域，背景颜色会延伸到 padding 区域。
- 边框（border）：围绕在 padding 外的一条边线，可设置宽度、样式和颜色。
- 外边距（margin）：盒子与其他元素之间的距离，透明且不接受背景色。
盒模型的两种计算方式
CSS中有两种盒模型：标准盒模型（content-box）和IE盒模型（border-box）。它们的区别在于 width 和 height 的计算范围不同。
1. 标准盒模型（content-box）
立即学习“前端免费学习笔记（深入）”；
这是CSS默认的盒模型。在这种模式下，width 和 height 只包括内容区，不包含 padding 和 border。
总占用空间计算公式为：
实际宽度 = width + 左右 padding + 左右 border + 左右 margin
实际高度 = height + 上下 padding + 上下 border + 上下 margin
例如：一个元素设置 width: 200px; padding: 10px; border: 5px solid; 则其实际宽度为：200 + 10*2 + 5*2 = 230px。
2. IE盒模型（border-box）
通过设置 box-sizing: border-box 启用。此时 width 和 height 包含了 content、padding 和 border，但不包括 margin。
在这种模式下，你设定的 width 就是元素最终的总宽度（含 padding 和 border），浏览器会自动压缩 content 区域来适应。
实际宽度计算公式简化为：
实际宽度 = width（已包含padding和border）+ 左右 margin
例如：width: 200px; padding: 10px; border: 5px solid; 在 border-box 下，content 宽度会被压缩为 170px（200 - 20 - 10），确保整体宽度仍为200px。
如何选择合适的盒模型
现代开发中，很多开发者倾向于全局使用 border-box，因为它让布局更直观，避免因添加 padding 或 border 导致元素溢出容器。
可以通过以下CSS重置默认行为：
* {
box-sizing: border-box;
}这样所有元素都采用 border-box 模式，减少意外的尺寸变化，提升响应式设计的可控性。
基本上就这些。掌握盒模型的结构和计算方式，能帮助你更准确地控制页面布局，减少调试时间。不复杂但容易忽略细节。
