CSS盒模型由内容、内边距、边框和外边距组成，总宽度=width+左右padding+左右border+左右margin；默认box-sizing:content-box导致尺寸膨胀，推荐使用box-sizing:border-box使宽高包含padding和border，配合*{box-sizing:border-box}重置全局样式，并注意垂直margin合并现象，以实现精确布局控制。
CSS盒模型是网页布局的核心概念之一，理解它的计算规则对精准控制元素尺寸至关重要。一个HTML元素在页面中所占据的实际空间，不仅仅由其内容决定，还包括内边距（padding）、边框（border）和外边距（margin）。这些部分共同构成了“盒模型”。
盒模型的基本组成
每个CSS盒模型包含四个层次，从内到外分别是：
- 内容区（content）：显示文本、图片等内容的区域，由 width 和 height 决定。
- 内边距（padding）：内容与边框之间的空白区域，会增加元素的视觉大小。
- 边框（border）：围绕内容和内边距的边线，占据实际空间。
- 外边距（margin）：盒子与其他元素之间的间距，不占背景，也不影响背景颜色或边框。
默认情况下，元素的总宽度计算方式如下：
总宽度 = width + 左右 padding + 左右 border + 左右 margin 总高度 = height + 上下 padding + 上下 border + 上下 marginwidth 与 box-sizing 的关系
默认的盒模型行为（即 box-sizing: content-box）会让设置的 width 和 height 仅作用于内容区域。一旦添加 padding 或 border，元素的实际尺寸就会超出设定值，容易导致布局错位。
立即学习“前端免费学习笔记（深入）”；
例如：
div {width: 200px;
padding: 20px;
border: 5px solid black;
}
实际宽度 = 200 + 2×20 + 2×5 = 250px
为避免这种“意外膨胀”，推荐使用 box-sizing: border-box。在这种模式下，width 和 height 包含了 content、padding 和 border，使尺寸更可控。
同样的例子，在 box-sizing: border-box 下：
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}
内容宽度 = 200 - 2×20 - 2×5 = 150px
实际占据宽度仍为 200px（符合预期）
外边距（margin）的特殊性
margin 不参与元素背景绘制，也不影响背景色或边框的显示范围，但它影响元素在页面中的位置和其他元素的排布。
值得注意的是，垂直方向上的相邻 margin 会发生外边距合并（margin collapse）现象。例如两个上下排列的块级元素，各自的 margin-bottom 和 margin-top 会取最大值而非相加。
例如：
p { margin: 20px 0; }两个 p 元素上下相邻时，它们之间的间距为 20px，而不是 40px。
实用建议与最佳实践
为了简化布局控制，建议在项目开始时统一设置盒模型：
*, *::before, *::after {box-sizing: border-box;
}
这样可以确保所有元素都遵循“设定宽高即实际宽高”的逻辑，减少计算误差。
同时，在调试布局时，利用浏览器开发者工具查看元素的盒模型图示，能直观看到 content、padding、border、margin 的分布情况，有助于快速定位问题。
基本上就这些。掌握盒模型的计算逻辑，才能真正实现精确布局。
