2025-09-05 CSS3——盒子模型

一个标准的盒子由内到外包含四个区域，它们共同决定了元素在页面上所占据的空间和最终的视觉表现。

• 外边距 (Margin)：位于盒子最外层，是边框之外的完全透明区域。它负责控制该元素与其他元素之间的距离，即“元素间的呼吸空间”。
• 边框 (Border)：环绕在内边距之外的线条，是盒子的可见轮廓。可以自定义其宽度、样式和颜色。
• 内边距 (Padding)：包裹在内容区域外部的透明空间，负责将内容与边框隔开。padding 区域会继承元素的背景颜色或图片。
• 内容 (Content)：盒子的核心区域，用于显示文本、图像或其他媒体内容。其尺寸由 width 和 height 属性控制。

1 Margin

margin 的核心作用是创建元素边框之外的空间，从而实现元素之间的分离。它本身是完全透明的，不会显示任何背景色。

1.1 单边外边距属性

CSS 提供了四个独立的属性，用于精确控制盒子每个方向的外边距。

• margin-top: 设置元素的上外边距。
• margin-right: 设置元素的右外边距。
• margin-bottom: 设置元素的下外边距。
• margin-left: 设置元素的左外边距。

.element {
  margin-top: 20px;     /* 上方留出 20px 的空间 */
  margin-bottom: 20px;  /* 下方留出 20px 的空间 */
  margin-left: 40px;    /* 左侧留出 40px 的空间 */
  margin-right: 40px;   /* 右侧留出 40px 的空间 */
}

1.2 简写属性

为了提升编码效率，强烈推荐使用 margin 简写属性。根据提供值的数量，其解析规则如下：

• 四值语法: margin: top right bottom left;
  • margin: 25px 50px 75px 100px;
    • 上外边距: 25px
    • 右外边距: 50px
    • 下外边距: 75px
    • 左外边距: 100px
• 三值语法: margin: top horizontal bottom; (horizontal 指左右)
  • margin: 25px 50px 75px;
    • 上外边距: 25px
    • 左、右外边距: 50px
    • 下外边距: 75px
• 二值语法: margin: vertical horizontal; (vertical 指上下)
  • margin: 25px 50px;
    • 上、下外边距: 25px
    • 左、右外边距: 50px
• 单值语法: margin: all;
  • margin: 25px;
    • 所有四个方向的外边距均为 25px

1.3 常用值

• length: 定义一个固定的外边距，如 px (像素), em (相对父元素字体大小), rem (相对根元素字体大小)。
  • margin: 16px;
• %: 定义一个基于包含块（containing block）宽度的百分比外边距。注意，无论是 margin-top 还是 margin-bottom，其百分比值都是相对于宽度计算的。
  • margin: 5%;
• auto: 由浏览器自动计算外边距。最经典的应用场景是将一个块级元素 (block-level element) 在其父容器中水平居中。
  • width: 80%; margin: 0 auto; (上下边距为0，左右边距自动均分剩余空间)

1.4 外边距折叠

这是一个重要的进阶概念：在垂直方向上，相邻的两个或多个块级元素的外边距会发生合并，合并后的外边距高度等于发生合并的两者中较大的那个值。

• 相邻兄弟元素：上面元素的 margin-bottom 和下面元素的 margin-top 会折叠。
• 父子元素：当父元素没有 padding 或 border 时，父元素的 margin-top 会和第一个子元素的 margin-top 折叠。

2 Border

边框是元素的视觉边界，由三个核心要素构成：宽度 (border-width)、样式 (border-style) 和颜色 (border-color)。

2.1 边框样式 (border-style)

此属性定义了边框线条的外观，是显示边框的必要条件。如果没有设置样式，即使设置了宽度和颜色，边框也不会显示。

• solid: 定义实线边框。
• dashed: 定义虚线边框。
• dotted: 定义点状边框。
• double: 定义双线边框。双线的宽度等于 border-width 的值。
• groove: 定义 3D 凹槽边框。
• ridge: 定义 3D 凸脊边框。
• inset: 定义 3D 内嵌边框。
• outset: 定义 3D 突起边框。
• none: 定义无边框 (默认值)。
• hidden: 定义隐藏边框。与 none 类似，但在表格布局中用于解决边框冲突。

与 margin 类似，border-style 也支持 1 到 4 个值的简写语法，规则完全相同，分别对应上、右、下、左四个方向的边框样式。

.box-styles {
  /* 四条边都是点状 */
  border-style: dotted;

  /* 上下为实线，左右为虚线 */
  border-style: solid dashed;

  /* 上: 点状, 右: 实线, 下: 双线, 左: 虚线 */
  border-style: dotted solid double dashed;
}

2.2 边框宽度 (border-width)

此属性用于设置边框的粗细。

• 预设值: thin (细), medium (中等), thick (粗)。
• length: 使用 px, em, rem 等单位指定精确宽度。

同样，border-width 也支持 1 到 4 个值的简写语法。

2.3 边框颜色 (border-color)

此属性用于定义边框的颜。

• 颜色值: 可以是颜色名称 (red), HEX (#ff0000), RGB (rgb(255,0,0)) 等。
• transparent: 透明边框。

border-color 也支持 1 到 4 个值的简写语法。

2.4 简写属性

最常用和最高效的方式是使用 border 简写属性，一次性为所有四条边设置宽度、样式和颜色。

语法: border: border-width border-style border-color;

.element {
  /* 定义一个 1px 宽、实线、黑色的边框 */
  border: 1px solid black;
}

也可以只为单边进行简写设置：

.element {
  /* 只设置上边框 */
  border-top: 2px dashed #ccc;
  /* 只设置下边框 */
  border-bottom: 4px double darkblue;
}

3 Outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

4 Padding

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

类似 Margin，CSS 提供了四个独立的属性，用于精确控制盒子每个方向的内边距。

• padding-top: 设置元素的上内边距。
• padding-right: 设置元素的右内边距。
• padding-bottom: 设置元素的下内边距。
• padding-left: 设置元素的左内边距。

同样，padding 也支持 1 到 4 个值的简写语法。

padding:25px 50px;