第五天：盒模型与文字样式 — 搞清楚每个盒子"有多大多远"
蜗牛往上爬 · 前端工业可视化学习笔记 第 5 篇
上一篇学会了用选择器"瞄准"元素。今天学 CSS 最核心的概念——盒模型：每个 HTML 元素都是一个矩形盒子，它的宽高、内边距、边框、外边距决定了页面布局。同时搞定文字样式，让内容"好看且好读"。
目录
一、盒模型：CSS 最核心的概念
HTML 中每个元素都是一个矩形盒子。不管你看不看得见，浏览器都按"盒子"来算每个元素占多大空间。
1.1 四层结构
┌─────────────────────────────────────────┐
│ margin（外边距） │
│ 盒子和其他盒子之间的距离，透明无背景 │
│ ┌───────────────────────────────────┐ │
│ │ border（边框） │ │
│ │ 盒子的"边界线"，可见 │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ padding（内边距） │ │ │
│ │ │ 内容和边框之间的"呼吸空间" │ │ │
│ │ │ ┌───────────────────────┐ │ │ │
│ │ │ │ content（内容区） │ │ │ │
│ │ │ │ 文字、图片、子元素 │ │ │ │
│ │ │ └───────────────────────┘ │ │ │
│ │ └─────────────────────────────┘ │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘
从内到外：content（内容） → padding（内边距） → border（边框） → margin（外边距）
1.2 代码示例
.box {
width: 200px; /* 内容区宽度 */
height: 100px; /* 内容区高度 */
padding: 20px; /* 内边距：内容和边框之间 */
border: 2px solid #333; /* 边框 */
margin: 10px; /* 外边距：和其他盒子的距离 */
}
🧠 生活类比：你买了一个相框（border），照片（content）和相框之间有一圈卡纸（padding），相框和墙上的其他相框之间有间距（margin）。
二、padding 与 margin 的简写规则
记住一个口诀：上 → 右 → 下 → 左（顺时针）
/* 四个值：上 右 下 左 */
padding: 10px 20px 10px 20px;
/* 三个值：上 左右 下 */
padding: 10px 20px 5px;
/* 两个值：上下 左右 */
padding: 10px 20px;
/* 一个值：四边相同 */
padding: 10px;
也可以单独设某一边：
margin-top: 20px;
margin-right: 0;
margin-bottom: 20px;
margin-left: 10px;
💡 什么时候用 margin，什么时候用 padding？
margin：盒子与盒子之间的距离（“外部间距”）
padding：内容与边框之间的距离（“内部呼吸空间”）
简单判断：想让背景色跟着延伸 → 用 padding；不想 → 用 margin
三、box-sizing：一个开关改变一切
这是 CSS 里最容易被忽略但影响最大的属性。
3.1 两种模式对比
/* 默认模式（content-box）：width = 内容区宽度 */
.box-default {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
/* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px 😱 */
}
/* 推荐模式（border-box）：width = 内容+内边距+边框 */
.box-fixed {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #333;
/* 实际占用宽度 = 200px（内容自动缩小到 150px）✅ */
}
3.2 为什么推荐 border-box？
<!-- 需求：两个卡片并排，各占 50% 宽度 -->
<style>
/* ❌ content-box 下，加了 padding 就超出 50% */
.card { width: 50%; padding: 20px; }
/* 实际宽度 = 50% + 40px，两个卡片放不下一行 */
/* ✅ border-box 下，width 就是最终宽度 */
.card { box-sizing: border-box; width: 50%; padding: 20px; }
/* 实际宽度 = 50%，两个卡片完美并排 */
</style>
🧠 全局设置：在所有 CSS 最前面加
* { box-sizing: border-box; }，让布局计算简单直观。
四、宽高设置的黄金法则
.box {
width: 300px; /* 固定宽度 */
max-width: 100%; /* 最大不超过父容器，防止溢出 */
min-width: 200px; /* 最小不低于 200px，防止太窄 */
/* 高度：能不用固定值就不用 */
min-height: 100px; /* 最小高度，兜底用 */
/* 不要写 height: 300px; 除非是头像、图标等固定元素 */
}
💡 原则：宽度用
width+max-width控制，高度用min-height兜底，不设height。
五、边框与圆角
5.1 边框
.card {
/* 三要素：宽度 样式 颜色（缺一不可） */
border: 2px solid #333;
/* 单独设某一边 */
border-top: 3px solid red;
border-bottom: 1px dashed #ccc;
/* 去掉边框 */
border: none;
}
border-style 常用值：solid（实线）、dashed（虚线）、dotted（点线）、none（无）。
5.2 圆角
.card {
/* 统一圆角 */
border-radius: 8px;
/* 四个角不同（左上 右上 右下 左下） */
border-radius: 10px 5px 20px 0;
/* 正圆：宽高相等 + border-radius: 50% */
width: 100px;
height: 100px;
border-radius: 50%;
}
六、文字样式全解
6.1 核心属性速查
.text-example {
/* 字体栈：从左到右匹配，找不到就用下一个 */
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
/* 字号：正文通常 14-16px */
font-size: 16px;
/* 字重：normal(400) / bold(700) / 100-900 */
font-weight: bold;
/* 文字颜色 */
color: #333;
color: rgb(51, 51, 51);
color: rgba(51, 51, 51, 0.8); /* 第四个值 0.8 是透明度 */
/* 行高：无单位值乘字号，如 1.6 × 16px = 25.6px */
line-height: 1.6;
/* 水平对齐 */
text-align: center;
/* 文字装饰：去掉下划线 */
text-decoration: none;
/* 首行缩进 */
text-indent: 2em;
}
6.2 字体栈（font-family）的写法
/* 从左到右匹配，直到找到系统存在的字体 */
font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
/* Windows Mac 备用 最后兜底 */
带空格的字体名要加引号（如
"Microsoft YaHei"）最后放一个通用字体族：
sans-serif（无衬线）、serif（衬线）、monospace（等宽）通用字体族是兜底，保证一定有字体可用
6.3 line-height 为什么用无单位值？
/* ✅ 推荐：无单位，子元素自己算 */
body { line-height: 1.6; }
/* 子元素 font-size: 20px → 行高 = 20 × 1.6 = 32px */
/* ❌ 不推荐：固定值，子元素不会自适应 */
body { line-height: 24px; }
/* 子元素无论字号多大，行高都是 24px，可能太挤 */
七、动手练：设备卡片
用一个完整示例，把盒模型和文字样式串起来。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>设备卡片</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
background: #f0f2f5;
padding: 40px;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
/* 设备卡片 */
.device-card {
width: 280px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
}
.device-card h3 {
font-size: 18px;
color: #1a3a5c;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid #1a3a5c;
}
.device-info {
line-height: 1.8;
color: #555;
}
.device-info span {
font-weight: bold;
color: #333;
}
.status-running { color: #2d6a4f; font-weight: bold; }
.status-stopped { color: #d62828; font-weight: bold; }
</style>
</head>
<body>
<div class="device-card">
<h3>压缩机 A</h3>
<p class="device-info">
<span>车间：</span>一车间<br>
<span>温度：</span>58℃<br>
<span>压力：</span>2.3MPa<br>
<span>状态：</span><span class="status-running">● 运行中</span>
</p>
</div>
<div class="device-card">
<h3>冷却泵 B</h3>
<p class="device-info">
<span>车间：</span>二车间<br>
<span>温度：</span>32℃<br>
<span>压力：</span>1.1MPa<br>
<span>状态：</span><span class="status-stopped">● 已停止</span>
</p>
</div>
<div class="device-card">
<h3>供料机 C</h3>
<p class="device-info">
<span>车间：</span>一车间<br>
<span>温度：</span>45℃<br>
<span>压力：</span>1.8MPa<br>
<span>状态：</span><span class="status-running">● 运行中</span>
</p>
</div>
</body>
</html>
验证方式：打开浏览器 → F12 → 点击任意卡片 → 在 Computed 面板（在 Styles 旁边）看盒模型示意图，你能看到四层颜色标注：蓝色=content、绿色=padding、橙色=border、黄色=margin。
八、常见坑点与最佳实践
坑 1：设了 width 但实际尺寸不对
/* 原因：默认 box-sizing 是 content-box */
.card { width: 300px; padding: 20px; }
/* 实际宽度 = 300 + 40 = 340px，为什么比想象的大？ */
解决：* { box-sizing: border-box; } 一劳永逸。
坑 2：margin 上下合并（塌陷）
/* 两个相邻盒子的 margin 会"合并"取较大值，而不是相加 */
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 实际间距 = 30px（取最大值），不是 50px */
这是 CSS 的"margin 塌陷"，是正常行为，记住即可。
坑 3：line-height 设了固定 px
/* ❌ 子元素改字号后行高不变 */
body { line-height: 24px; }
/* ✅ 用无单位值，子元素自适应 */
body { line-height: 1.6; }
最佳实践清单
[x] 全局
* { box-sizing: border-box; }[x] padding 给内容"呼吸空间"，margin 给盒子"外部间距"
[x] 尽量用
width+max-width，高度用min-height兜底[x]
line-height用无单位值（1.5-1.8）[x]
font-family写字体栈，最后放通用字体族
九、这些知识在工业可视化里用在哪？
大屏上每个数据面板都是一个"盒子"：
/* 大屏面板 = 盒模型 + 文字样式 */
.data-panel {
width: 380px;
background: rgba(10, 20, 40, 0.85);
border: 1px solid #1a5c8a;
border-radius: 6px;
padding: 16px;
margin: 8px;
box-sizing: border-box;
}
.data-panel h3 {
font-size: 16px;
color: #8ecae6;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #1a5c8a;
}
.data-panel .value {
font-size: 36px;
font-weight: bold;
color: #00ff88;
line-height: 1.2;
text-align: center;
}
盒模型决定了面板占多大空间、和相邻面板隔多远，文字样式决定了数据是否清晰可读。大屏上几十个数据面板，每个都是一个精确控制的"盒子"。
十、自测挑战 10 题
盒模型四层从内到外分别是什么？
padding: 10px 20px;四个方向的取值分别是什么？content-box和border-box区别是什么？为什么推荐border-box？width: 200px;在border-box下，如果padding: 20px; border: 5px;，content 实际多宽？border: 2px solid #333;三个值分别是什么含义？如何让一个正方形变成正圆？
font-family写多个字体名的意义是什么？sans-serif是什么？line-height: 1.6;和line-height: 24px;有什么区别？推荐哪个？给设备卡片换个配色方案（主色从
#1a3a5c换成#2d6a4f）。用 F12 的 Computed 面板，查看任意一个带
padding的元素的盒模型示意图。
加分挑战：在设备卡片上把 border-radius 从 8px 改成 16px、border 从 1px 改成 2px，观察视觉变化。
十一、总结
今天学完，你应该能做到：
[x] 画出盒模型四层结构并解释各自作用
[x] 写出 padding 和 margin 的简写（1-4 个值）
[x] 理解
content-box和border-box的区别，全局使用border-box[x] 合理设置宽高（width + max-width + min-height）
[x] 写出边框、圆角、正圆
[x] 掌握字体、字号、字重、行高、对齐等文字样式
一句话带走：盒模型是 CSS 布局的基石——每个元素都是"content + padding + border + margin"四层盒子，border-box 让宽度计算一目了然。
📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 2 周 · 第 2 篇