盒子模型

浏览器把大多数元素看成一个矩形盒子。后台卡片、搜索区和表格容器的尺寸，都由内容、内边距、边框和外边距共同决定。

盒模型的四层

margin  外边距：盒子与其他盒子的距离
└── border  边框
    └── padding  内边距：内容与边框的距离
        └── content  内容区域

示例：

.student-card {
    width: 320px;
    padding: 24px;
    border: 1px solid #d9e1ec;
    margin-bottom: 16px;
}

效果如下：

内容区：宽 320px

卡片下方的空隙来自 margin-bottom: 16px。

设置盒子的基本尺寸

内容区宽高

.student-card {
    width: 320px;
    min-height: 160px;
}

• width、height：指定宽高。
• min-width、min-height：允许增长，但不小于指定值。
• max-width、max-height：限制最大尺寸。

内容长度不固定时，优先让高度自动增长，使用 min-height 而不是强行固定 height。

响应式内容区常用：

.page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

边框与圆角

边框的属性

语法：

.panel {
    border: 1px solid #d9e1ec;
}

边框简写依次表示宽度、样式和颜色，也就是 border-width、border-style、border-color。

属性	作用
border-width	定义边框粗细，单位是 px
border-style	边框的样式
border-color	边框颜色

下面详细介绍一下 border-width、border-style 以及 border-color 属性。

1、 border-width

border-width 属性用于定义边框的宽度，取值是一个像素值。

2、 border-style

border-style 属性用于定义边框的外观，常用取值如下表所示。

属性值	说明
none	无样式
dashed	虚线
solid	实线

除了上表列出这几个，还有 hidden、dotted、double 等取值。不过其他取值几乎用不上，可以直接忽略。

3、 border-color

border-color 属性用于定义边框的颜色，取值可以是“关键字”或“16 进制 RGB 值”。

.panel {
    border: 1px solid #d9e1ec;
    border-radius: 12px;
}

圆角 12px

边框简写依次包含宽度、样式和颜色。也可以只设置某一侧：

.table-row {
    border-bottom: 1px solid #e5e7eb;
}

仅底边框

圆形头像需要正方形盒子和足够大的圆角：

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

学

内边距 padding

padding 属性用于设置内边距。 是指边框与内容之间的距离。

.panel {
    padding: 24px;
}

四个方向可以分别设置：

.panel {
    padding-top: 24px;
    padding-right: 20px;
    padding-bottom: 24px;
    padding-left: 20px;
}

简写规则：

.a {
    padding: 16px;
}

/* 上右下左 */
.b {
    padding: 16px 24px;
}

/* 上下、左右 */
.c {
    padding: 16px 24px 20px;
}

/* 上、左右、下 */
.d {
    padding: 12px 16px 20px 24px;
}

/* 上、右、下、左 */

按顺时针记忆四值写法。

案例：

<div style="border: 1px dashed;padding: 5px">
    <div style="border: 1px solid #e5e7eb;width: 100px;height: 100px;padding: 12px 16px 20px 24px;">
        <div style="background-color:red;width: 100%;height: 100%;"></div>    
    </div>
</div>

内容区

上 12px · 右 16px
下 20px · 左 24px

外边距 margin

margin 属性用于设置外边距。 margin 就是控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin 值的简写（复合写法）代表意思 跟 padding 完全相同。

.page-title {
    margin: 0 0 24px;
}

.panel {
    margin-bottom: 16px;
}

页面标题

间距 24px

统计面板

面板下方另留 16px 外边距。

外边距负责盒子之间的距离。简写顺序与 padding 相同。

块级盒子可以使用自动左右外边距居中：

.page {
    width: 960px;
    margin: 0 auto;
}

它需要盒子宽度小于可用空间。文字居中使用 text-align，不是 margin: auto。

盒子阴影

.student-card {
    box-shadow: 0 8px 24px rgb(15 23 42 / 8%);
}

四个常用值依次表示水平偏移、垂直偏移、模糊半径和颜色。阴影绘制在盒子外侧，不参与盒模型尺寸计算，也不负责推开相邻元素。

后台卡片优先使用轻微阴影或浅色边框建立层次，不堆叠多组浓重阴影。

计算盒子的实际尺寸

默认盒模型 content-box

默认 box-sizing: content-box：

.card {
    width: 320px;
    padding: 20px;
    border: 1px solid #d9e1ec;
}

实际占用宽度为：

内容宽度 320
+ 左右内边距 20 × 2
+ 左右边框 1 × 2
= 362px

外边距不计入盒子自身尺寸，但会影响它与其他盒子的距离。

更直观的 border-box

*,
*::before,
*::after {
    box-sizing: border-box;
}

设置 border-box 后，声明的 width 包含内容、内边距和边框：

.card {
    box-sizing: border-box;
    width: 320px;
    padding: 20px;
    border: 1px solid #d9e1ec;
}

此时盒子边框外沿宽度仍为 320px，内容区自动缩小。项目通常全局使用 border-box，尺寸更容易预测。

处理默认间距行为

垂直外边距合并

普通文档流中，相邻块级盒子的垂直外边距有时会合并：

.first {
    margin-bottom: 24px;
}

.second {
    margin-top: 16px;
}

两者之间通常不是 40px，而是取较大的 24px。父元素与第一个或最后一个子元素的垂直外边距也可能发生合并。

初学阶段的处理方式：

• 同一组纵向元素尽量统一从一个方向设置间距，如只用 margin-bottom。
• 容器需要内容与边缘距离时使用 padding。
• 后续 Flex 布局中可使用 gap 管理子项间距，Flex 子项的外边距不会按普通块级方式合并。

不要为了消除合并随意添加透明边框或 overflow: hidden，它们可能带来其他效果。

浏览器默认外边距

body、标题和段落通常自带浏览器默认外边距。项目常进行有限重置：

body {
    margin: 0;
}

h1,
h2,
p {
    margin-top: 0;
}

不要一开始清除所有元素的全部样式，否则表单控件、列表等会失去有用的默认表现。

完成统计卡片

HTML：

<section class="stats" aria-label="学员统计">
    <article class="stat-card">
        <h2 class="stat-title">学员总数</h2>
        <p class="stat-value">128</p>
        <p class="stat-note">较上周增加 8 人</p>
    </article>
</section>

CSS：

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #f4f7fb;
    color: #273142;
    font-family: "Microsoft YaHei", sans-serif;
}

.stats {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px;
}

.stat-card {
    width: 280px;
    min-height: 160px;
    padding: 24px;
    border: 1px solid #d9e1ec;
    border-radius: 12px;
    background-color: #ffffff;
}

.stat-title {
    margin: 0 0 12px;
    color: #667085;
    font-size: 16px;
}

.stat-value {
    margin: 0 0 8px;
    color: #17233d;
    font-size: 36px;
    font-weight: 700;
}

.stat-note {
    margin: 0;
    color: #16803c;
    font-size: 14px;
}

学员总数

128

较上周增加 8 人

目前只有一张卡片。多张卡片的横向排列在 Flex 章节完成。

小结

1. 盒模型由内容、内边距、边框和外边距组成。
2. padding 管内部留白，margin 管盒子间距离。
3. content-box 的声明宽度只包含内容区。
4. 项目通常全局使用 border-box 让尺寸更可预测。
5. 普通块级盒子的相邻垂直外边距可能合并。

统计卡片源码

01-stat-card.html

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学员统计卡片</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background-color: #f4f7fb;
            color: #273142;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .stats {
            max-width: 1200px;
            margin: 0 auto;
            padding: 32px 20px;
        }

        .stat-card {
            width: 280px;
            min-height: 160px;
            padding: 24px;
            border: 1px solid #d9e1ec;
            border-radius: 12px;
            background-color: #ffffff;
        }

        .stat-title {
            margin: 0 0 12px;
            color: #667085;
            font-size: 16px;
        }

        .stat-value {
            margin: 0 0 8px;
            color: #17233d;
            font-size: 36px;
            font-weight: 700;
        }

        .stat-note {
            margin: 0;
            color: #16803c;
            font-size: 14px;
        }
    </style>
</head>
<body>
<section class="stats" aria-label="学员统计">
    <article class="stat-card">
        <h2 class="stat-title">学员总数</h2>
        <p class="stat-value">128</p>
        <p class="stat-note">较上周增加 8 人</p>
    </article>
</section>
</body>
</html>