CSS基础之盒子模型

CSS盒子模型定义了元素如何显示以及与其他元素间的关系。它包括内容区域（content area）、内边距（padding）、边框（border）、外边距（margin）和边框（border）。

CSS盒子模型属性包括：

1. width 和 height：指定内容区域的宽度和高度。
2. padding：内边距，在内容区域外面，且包括在元素的宽度和高度之内。
3. border：边框，包括在元素的宽度和高度之内。
4. margin：外边距，在边框外面，且不包括在元素的宽度和高度之内。

可以单独设置元素的上、右、下、左内边距（padding-top、padding-right、padding-bottom、padding-left）、上、右、下、左边框（border-top、border-right、border-bottom、border-left）和上、右、下、左外边距（margin-top、margin-right、margin-bottom、margin-left）。

CSS代码示例：

.box {
  width: 300px;        /* 内容宽度 */
  height: 200px;       /* 内容高度 */
  padding: 20px;       /* 统一设置内边距 */
  border: 1px solid;   /* 统一设置边框 */
  margin: 10px;        /* 统一设置外边距 */
  background-color: #f0f0f0; /* 背景颜色 */
}

HTML代码示例：

<div class="box"></div>

以上代码会创建一个宽度和高度均为300px的盒子，内容区域有20px的内边距，边框宽度为1px，外边距为10px，背景色为浅灰色。