第14课：盒子模型
进度 0/30
📦
盒子模型
网页里所有东西都是盒子
📖知识引入
📦万物皆盒子
网页里每个元素都是一个矩形盒子：文字是盒子、图片是盒子、按钮也是盒子。看不见它们，是因为大部分盒子没涂色。
🧅盒子的四层结构
从里到外：内容content（商品）、内边距padding（泡沫缓冲）、边框border（纸箱壁）、外边距margin（箱子之间的距离）。这就是大名鼎鼎的「盒子模型」！
🛍️快递箱比喻
网上买的杯子=内容；杯子裹的泡沫=padding；快递纸箱=border；这个快递和下个快递的间距=margin。一次网购，四个概念全记住！
🎛️调节空间感
盒子太挤？加margin拉开距离。文字贴边？加padding留出呼吸。网页的「呼吸感」全靠这两个间距高手。
🤖AI调盒子的神
跟AI说「卡片之间太挤了，帮我拉开点距离」「文字离边框太近」，AI精准帮你改margin和padding，一改一个准。
💡
网页拥挤？先加padding和margin，立竿见影！
🔍解剖一个快递盒
.card {
padding: 20px; /* 泡沫缓冲 */
border: 2px solid #ddd; /* 纸箱壁 */
margin: 16px; /* 箱间距 */
border-radius: 12px; /* 圆角，可爱+1 */
}
/* 调试小技巧：加个背景色，盒子现形！ */
.card {
background: #f0f9ff;
}盒子模型四层解剖图：
┌─ margin（外边距）─────────┐ │ ┌─ border（边框）───────┐ │ │ │ ┌─ padding（内边距）┐ │ │ │ │ │ ┌──────────────┐ │ │ │ │ │ │ │ content │ │ │ │ │ │ │ │ （内容） │ │ │ │ │ │ │ └──────────────┘ │ │ │ │ │ └──────────────────┘ │ │ │ └──────────────────────┘ │ └──────────────────────────┘
📦 翻译成快递： content = 杯子（真东西） padding = 泡沫（保护缓冲） border = 纸箱（看得见的壁） margin = 箱子之间的距离
右边代码实战： 加完padding文字不贴边、 加完border有轮廓、 加完margin卡片不打架。 三个属性一加， 毛坯卡片变身精装卡片！
🎯小测验
第1题：「盒子模型」中，padding指的是什么？
第2题：想让两张卡片之间离远一点，应该调什么？
第3题：调试时想看清盒子的边界，最简单的办法是？
📝本课知识点
- ✓网页万物皆盒子
- ✓四层结构：内容/内边距/边框/外边距
- ✓快递箱比喻一次记住四个概念
- ✓padding管里面，margin管外面
- ✓加背景色让盒子现形好调试
第14课完成！继续探索下一课吧 🚀