CSS盒子模型：网页布局的核心

在CSS中，每个元素都被看作一个矩形的盒子，盒子模型描述了这个盒子的组成部分。一个典型的盒子由以下四个区域构成，从里到外依次是：

• 内容区域（Content）：这是盒子的核心部分，包含了实际的内容（如文字、图片等）（上图中的蓝色部分）。可以通过width和height来设置内容区域的宽高。

• 内边距（Padding）：内边距是内容区域与边框之间的空白区域。可以通过padding属性来设置内边距，这个区域会影响盒子的实际大小。

• 边框（Border）：边框围绕在内容和内边距的外面。你可以通过border属性来设置边框的样式、宽度和颜色。

• 外边距（Margin）：外边距是盒子与其他元素之间的空白区域。通过margin属性来设置外边距。它不会影响盒子的实际大小，但会影响元素与其周围元素的距离。

首先

在我们编程时应该先将默认的内外边距设置为0，消除浏览器默认样式造成的错误。

* {
  margin: 0;
  padding: 0;
}

1. Content（内容区域）

content是盒子模型中最核心的部分。你可以使用width和height属性来设置内容区域的尺寸。但需要注意，如果设置了内边距、边框或外边距，它们会影响到元素的总尺寸。

.box {
  width: 200px;
  height: 100px;
}

2. Padding（内边距）

padding属性用于设置内容区域与边框之间的距离。你可以为盒子的四个方向单独设置内边距：

• padding-top

• padding-right

• padding-bottom

• padding-left

.box {
  padding: 10px; /* 设置四边内边距为10px */
  padding: 10px 20px; /* 上下边距为10px  左右边距为20px*/
  padding: 10px 20px 30px; /* 上下边距为10px  左右边距为20px 下边距为30px */
  padding: 10px 10px 10px 20px; /* 顺时针各个反向上的Padding值 */
}

3. Border（边框）

border属性用于设置边框的宽度、样式和颜色。常见的边框样式有solid(实线边框)、dashed(虚线)、dotted(点线)等。

.box {
 border: 2px solid black; /* 设置2px的黑色实线边框 */
 border-radius: 10px; /* 设置圆角边框 */
}

4. Margin（外边距）

margin属性用于设置盒子与其他元素之间的距离。和内边距类似，也可以单独设置上下左右的外边距：

• margin-top

• margin-right

• margin-bottom

• margin-left

.box {
  margin: 10px; /* 设置四边距为10px */
  margin: 10px 20px; /* 上下边距为10px  左右边距为20px*/
  margin: 10px 20px 30px; /* 上下边距为10px  左右边距为20px 下边距为30px */
  margin: 10px 10px 10px 20px; /* 顺时针各个反向上的margin值 */
}