组成部分
1. 内容（Content）
- 盒子的核心区域，显示实际内容（如文本、图片等）。
- 通过
width和height属性设置内容的宽度和高度。
2. 内边距（Padding）
- 内容与边框之间的空间。
- 通过
padding属性设置，可以分别设置上、右、下、左四个方向的内边距。 - 示例： padding: 10px; /* 上下左右均为10px / padding: 10px 20px; / 上下10px，左右20px / padding: 10px 20px 30px 40px; / 上10px，右20px，下30px，左40px */
3. 边框（Border）
- 内边距和外边距之间的边界线。
- 通过
border属性设置，包括宽度、样式和颜色。 - 示例： border: 2px solid red; /* 2px宽度，实线，红色 */
4. 外边距（Margin）
- 盒子与其他元素之间的空间。
- 通过
margin属性设置，可以分别设置上、右、下、左四个方向的外边距。 - 示例： margin: 10px; /* 上下左右均为10px / margin: 10px 20px; / 上下10px，左右20px / margin: 10px 20px 30px 40px; / 上10px，右20px，下30px，左40px */
盒子模型示意图
盒子模型的计算方式
1、标准盒子模型
box-sizing: content-box，盒⼦的⼤⼩ = width + padding + border + margin
- 示例： .box { width: 200px; padding: 20px; border: 5px solid black; margin: 10px; } 总宽度 = 200px (内容) + 40px (左右内边距) + 10px (左右边框) + 20px (左右外边距) = 270px。
2、IE盒子模型
box-sizing: border-box，盒⼦的⼤⼩ = width + margin，因为 width 已经包含了 padding + border
- 示例：
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
总宽度 = 200px (内容 + 内边距 + 边框) + 20px (左右外边距) = 220px。
应用场景
1. 布局控制
- 通过
margin和padding调整元素之间的间距。 - 示例： .container { padding: 20px; } .item { margin: 10px; }
2. 边框样式
- 使用
border属性为元素添加边框。 - 示例： .box { border: 2px dashed #ccc; }
3. 响应式设计
- 使用百分比或
calc()函数动态计算盒子尺寸。 - 示例： .box { width: calc(100% - 40px); padding: 20px; }
4. 居中布局
- 使用
margin: auto实现水平居中。 - 示例： .box { width: 200px; margin: 0 auto; }
常见问题
1. 外边距折叠（Margin Collapse）
-
当两个垂直相邻的元素都有外边距时，它们的实际间距取两者外边距的最大值，而不是相加。
-
解决方法：
- 使用
padding代替margin。 - 使用
border或padding隔开元素。
- 使用
2. 盒子尺寸超出父容器
-
当子元素的
width、padding、border和margin总和超过父容器的宽度时，会导致布局问题。 -
解决方法：
- 使用
box-sizing: border-box。 - 调整子元素的尺寸或外边距。
- 使用
