CSS盒模型由content、padding、border、margin组成，总宽=width+左右padding+左右border+左右margin；使用box-sizing:border-box可将padding和border包含在宽高中，避免布局溢出，推荐全局设置*{box-sizing:border-box}以统一行为。
CSS盒模型是网页布局的核心概念之一，每个HTML元素都可以看作是一个矩形盒子。理解盒模型的结构和工作方式，是掌握页面排版和样式控制的基础。
盒模型的基本组成
每一个元素的盒模型由四个部分构成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。
• content：盒子中的实际内容，比如文字、图片等，尺寸由 width 和 height 决定。• padding：内容与边框之间的空间，背景色会延伸到 padding 区域。
• border：围绕内容和 padding 的边框线，可设置宽度、样式和颜色。
• margin：盒子与其他元素之间的空白区域，不包含背景，用于控制间距。
默认情况下，元素的总宽度计算公式为：
总宽度 = width + 左右padding + 左右border + 左右margin
立即学习“前端免费学习笔记（深入）”；
总高度同理。
box-sizing 属性的使用
默认的盒模型行为有时会让布局变得难以控制，特别是当设置了 padding 或 border 后，元素的实际尺寸会超出预期。这时可以使用 box-sizing 属性来改变计算方式。
• content-box：默认值。width 和 height 只包含 content，padding 和 border 额外增加。• border-box：width 和 height 包含 content、padding 和 border。更便于控制布局。
推荐在项目中统一设置：
*, *::before, *::after { box-sizing: border-box; }
这样所有元素都按 border-box 模式计算尺寸，避免意外溢出。
常见使用场景与技巧
合理运用盒模型可以简化布局设计。
• 使用 margin 实现水平居中：margin: 0 auto;（需配合固定宽度）。• 利用负 margin 调整元素位置或重叠布局。
• 设置 padding 时注意不要让内容区被压缩，建议配合 box-sizing: border-box。
• 清除默认 margin 和 padding：body, ul, h1-h6 等标签常有默认值，可重置为 0。
实例演示
一个简单的 div 设置：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
margin: 10px;
box-sizing: border-box;
}
此时该元素的总宽度仍为 200px（包含 padding 和 border），外层占用空间为 200px + 20px（左右 margin）= 220px。
如果不使用 border-box，则 content 宽度为 200px，加上 padding 和 border 后实际宽度变为 250px，容易导致布局错乱。
基本上就这些。掌握盒模型的关键在于理解各部分如何影响元素尺寸，以及灵活使用 box-sizing 来控制布局行为。
