CSS 盒模型是 CSS 布局的基础，它定义了每个元素在页面中的占位方式。盒模型包含以下几个核心部分：
1. 标准盒模型的组成部分
内容区（Content）
- 显示文本、图像等实际内容
- 通过
width和height属性设置尺寸
内边距（Padding）
- 内容与边框之间的透明区域
- 通过
padding属性设置 - 可以使用
padding-top、padding-right等分别设置各边
边框（Border）
- 围绕内容和内边距的边界线
- 通过
border属性设置样式、宽度和颜色
外边距（Margin）
- 边框外部的透明区域，用于分隔相邻元素
- 通过
margin属性设置 - 外边距合并是重要特性（相邻垂直外边距会合并）
2. 两种盒模型类型
标准盒模型（content-box） - 默认值
box-sizing: content-box;
width和height只包含内容区域- 元素总宽度 = width + padding + border + margin
IE盒模型（border-box）
box-sizing: border-box;
width和height包含内容、内边距和边框- 元素总宽度 = width + margin
- 更直观，更符合开发习惯
3. 盒模型相关属性示例
div {
/* 内容尺寸 */
width: 200px;
height: 100px;
/* 内边距 */
padding: 20px; /* 上下左右 */
padding: 10px 20px; /* 上下 | 左右 */
padding: 5px 10px 15px 20px; /* 上 右 下 左 */
/* 边框 */
border: 2px solid #333;
border-width: 1px 2px;
border-style: solid dashed;
/* 外边距 */
margin: 30px;
margin: 20px auto; /* 水平居中 */
/* 选择盒模型 */
box-sizing: border-box; /* 推荐使用 */
}
4. 特殊情况和注意事项
外边距合并（Margin Collapse）
- 相邻块级元素的垂直外边距会合并
- 父子元素的外边距也可能合并
- 水平外边距不会合并
display 属性影响
- 块级元素（block）：占据整行，支持所有盒模型属性
- 行内元素（inline）：宽度高度无效，垂直内边距/外边距不影响布局
- 行内块（inline-block）：兼具两者特点
负外边距
- 可以设置负值，用于特殊布局效果
- 可能改变元素位置和尺寸计算
5. 盒模型调试技巧
现代浏览器开发者工具都提供盒模型可视化：
- 查看各部分的尺寸
- 检查外边距合并
- 调试布局问题
推荐实践：
* {
box-sizing: border-box; /* 全局使用 border-box */
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
理解盒模型是掌握 CSS 布局的关键，它直接影响元素的尺寸计算、定位和与其他元素的交互方式。
