1. 内容区域（Content）:
- 这是盒子内部包含实际内容的区域，例如文本、图像等。
- 可以通过 width 和 height 属性设置内容区域的宽度和高度。
2. 内边距（Padding）:
- 内边距是内容区域与边框之间的空间，用于控制内容与边框的距离。
- 可以使用 padding 属性设置内边距的大小，可以分别设置上、右、下、左的内边距。
3. 边框（Border）:
- 边框是围绕内容和内边距的线，用于界定盒子的边界。
- 可以使用 border 属性设置边框的样式、宽度和颜色，也可以分别设置上、右、下、左的边框。
4. 外边距（Margin）:
- 外边距是盒子与相邻元素之间的空间，用于控制元素之间的距离。
- 可以使用 margin 属性设置外边距的大小，可以分别设置上、右、下、左的外边距。
盒子模型的总宽度计算公式为：总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距。
在CSS中，可以通过以下样式属性来控制盒子模型的各个方面：
- width 和 height: 设置内容区域的宽度和高度。
- padding: 设置内边距。
- border: 设置边框。
- margin: 设置外边距。
示例：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
}
这会创建一个宽度为 200px、高度为 100px 的盒子，内边距为 20px，边框为 2px 实线，外边距为 10px。盒子模型的理解是进行有效布局的基础，特别是在调整元素之间的间距和排列时。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12527/CSS