盒模型由content、padding、border、margin组成，默认width仅含content，易导致布局溢出；使用box-sizing: border-box可使width包含padding和border，提升尺寸控制精度；padding用于内部留白，影响背景与边框，margin用于外部间距，注意垂直合并问题；border增加元素尺寸，建议用透明边框预留空间以避免重绘；合理设置三者可减少布局错误，提升渲染效率与开发体验。
在CSS布局中，盒模型是构建页面结构的基础。理解并优化padding、margin和border的使用，不仅能提升页面渲染效率，还能避免常见的布局错位问题。
盒模型基础：content + padding + border + margin
每个HTML元素都被视为一个矩形盒子，由四部分组成：
- content：实际内容区域，如文字、图片等
- padding：内边距，内容与边框之间的空间
- border：边框，围绕padding的线条
- margin：外边距，盒子与其他元素之间的空白
默认情况下，元素的宽度（width）仅指content区域，加上padding和border后，实际占用空间会更大，容易导致布局溢出。
使用box-sizing优化尺寸控制
为避免尺寸计算混乱，推荐设置box-sizing: border-box：
立即学习“前端免费学习笔记（深入）”；
box-sizing: border-box;此时，设置的width和height包含content、padding和border，使布局更直观可控。例如：
.box {
width: 200px;
padding: 20px;
border: 5px solid #ccc;
box-sizing: border-box;
}
这个元素的总宽度仍为200px，padding和border会被“压缩”进设定的尺寸内，不会撑开容器。
padding与margin的合理使用场景
padding用于调整元素内部空间，影响背景色和边框的覆盖范围。适合：
- 按钮内文字与边缘的距离
- 卡片内容与边框的留白
margin控制元素间的外部间距，常用于布局分隔。注意：
- 相邻垂直margin会发生合并（collapse），取较大值
- 行内元素的vertical margin可能不生效
- 父元素与第一个子元素的top margin也可能合并
可通过设置父元素padding或border来阻止margin合并。
border对布局的影响与优化
border不仅影响视觉，也增加元素实际尺寸。优化建议：
- 使用
box-sizing: border-box统一计算方式 - 需要隐藏边框时用
border: none而非border: 0（后者更高效） - 避免频繁切换border样式造成重绘，可用透明边框预留空间
例如提前设置border: 1px solid transparent，切换时只改颜色，不触发布局变化。
基本上就这些。掌握盒模型的核心在于理解尺寸计算逻辑，并通过box-sizing统一管理。合理使用padding、margin和border，能有效减少布局bug，提升开发效率。
