CSS 盒模型（Box Model）
核心概念
HTML 里所有元素都是一个矩形盒子，浏览器就是靠堆这些盒子拼出整个页面的。盒模型规定了盒子由哪几部分组成，尺寸怎么算。
快递盒比喻
| 盒子部分 | 对应快递盒的什么 | 作用 | Tailwind 写法 |
|---|---|---|---|
content（内容） | 你买的商品本身 | 放实际内容（文字、图片、子元素） | w-* h-* 控制内容尺寸 |
padding（内边距） | 商品和盒子内壁之间的泡沫填充 | 把内容和边框隔开，撑出内部空隙 | p-* 控制内边距大小 |
border（边框） | 快递盒本身的硬纸板 | 盒子的边界，可视化的轮廓 | border border-* 控制边框 |
margin（外边距） | 这个快递盒和旁边其他快递盒之间的空隙 | 把当前盒子和其他盒子隔开，撑出外部空隙 | m-* 控制外边距大小 |
┌───────────── margin ─────────────┐
│ ┌────────── border ───────────┐ │
│ │ ┌────── padding ──────┐ │ │
│ │ │ │ │ │
│ │ │ content │ │ │
│ │ │ │ │ │
│ │ └──────────────────────┘ │ │
│ └─────────────────────────────┘ │
└──────────────────────────────────┘直观演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- T3+Tailwind默认就是这个全局设置，提前感受 -->
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 外层大盒子 -->
<div
style="
width: 250px; /* 整个盒子总宽就是250px，不会变大 */
height: 250px; /* 整个盒子总高就是250px */
margin: 30px; /* 我和浏览器边缘（其他盒子）的空隙是30px */
padding: 30px; /* 我边框和内容之间的空隙是30px */
border: 5px solid red; /* 边框就是这圈红色 */
background: lightblue;
"
>
<!-- 里面的内容盒子 -->
<div style="background: yellow;">我就是内容content</div>
</div>
</body>
</html>对应关系：
- 黄色块 → 内容
content - 黄色和红色边框之间的浅蓝色区域 →
padding - 红色那一圈 →
border - 整个大盒子和浏览器边缘的空白 →
margin
核心必懂：盒子尺寸计算
有两种计算盒子总宽度的规则：
1. 旧规则 content-box（默认）
你写 width: 200px，只是内容宽 200，总宽度还要额外加 padding + border。很容易撑破布局，要不停算尺寸。
2. 现代规则 border-box（推荐）
你写 width: 200px，整个盒子（内容 + padding + border）总宽度就是 200，padding 和 border 从 200 里扣，不会额外变大。布局非常好控制。
T3 + Tailwind 初始化的项目，默认全局就把所有元素改成了
border-box，不用额外设置，直接用就行。这也是 Tailwind 写布局快的核心原因之一。
实际开发中的对应
写 T3 项目时，所有 Tailwind 样式都是操作盒模型：
| 场景 | Tailwind 类 | 对应盒模型 |
|---|---|---|
| 给卡片内部留空隙 | p-4 | 加 padding |
| 让按钮和标题之间留空隙 | mt-2 | 给 margin-top 加值 |
| 固定卡片宽度 | w-80 | 设总宽度，不用担心 padding 撑大盒子 |