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

文章目录

[1 Margin](#1 Margin)
- [1.1 单边外边距属性](#1.1 单边外边距属性)
- [1.2 简写属性](#1.2 简写属性)
- [1.3 常用值](#1.3 常用值)
- [1.4 外边距折叠](#1.4 外边距折叠)
[2 Border](#2 Border)
- [2.1 边框样式 (`border-style`)](#2.1 边框样式 (border-style))
- [2.2 边框宽度 (`border-width`)](#2.2 边框宽度 (border-width))
- [2.3 边框颜色 (`border-color`)](#2.3 边框颜色 (border-color))
- [2.4 简写属性](#2.4 简写属性)
[3 Outline](#3 Outline)
[4 Padding](#4 Padding)

在 CSS 中，每一个 HTML 元素都可以被视为一个矩形的"盒子"。盒模型（Box Model）就是描述这个盒子结构、尺寸和布局方式的规范。精准地理解和运用盒模型，是进行网页布局和设计的基石。

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

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

1 Margin

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

1.1 单边外边距属性

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

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

css 复制代码

.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 个值的简写语法，规则完全相同，分别对应上、右、下、左四个方向的边框样式。

css 复制代码

.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;

css 复制代码

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

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

css 复制代码

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

3 Outline

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

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

属性	说明	值	CSS
outline	在一个声明中设置所有的轮廓属性	outline-color、outline-style、outline-width、inherit	2
outline-color	设置轮廓的颜色	color-name、hex-number、rgb-number、invert、inherit	2
outline-style	设置轮廓的样式	none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit	2
outline-width	设置轮廓的宽度	thin、medium、thick、length、inherit	2

4 Padding

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

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

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

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

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

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

css 复制代码

padding:25px 50px;

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

文章目录

1 Margin

1.1 单边外边距属性

1.2 简写属性

1.3 常用值

1.4 外边距折叠

2 Border

2.1 边框样式 (border-style)

2.2 边框宽度 (border-width)

2.3 边框颜色 (border-color)

2.4 简写属性

3 Outline

4 Padding

2.1 边框样式 (`border-style`)

2.2 边框宽度 (`border-width`)

2.3 边框颜色 (`border-color`)