盒子模型：万物皆盒子，除了你老板画的大饼

【总览】

1. 老板让网页“穿件衣服”——CSS 到底是啥？
2. 选择器：在 HTML 里精准点外卖
3. 颜色与字体：如何让你的网站看起来像“设计师”而不是“设计师他弟”
4. 盒子模型：万物皆盒子，除了你老板画的大饼
5. 定位与布局：把 div 当乐高，拼出九宫格还是巴黎铁塔随你
6. 动画：让按钮像猫咪一样会摇尾巴
7. 祖传小妙招：三行代码拯救祖传乱码页

阅读提示：800 字左右，电梯上楼时间刚好；学不会你来打我，我躲进电梯井。

一、先拆穿一个骗局

“网页自由排版”——骗小白的。
真相是：浏览器把每个标签都当成矩形盒子，像麻将牌一样挨个码。
不理解盒子模型？那就等于打麻将不看牌，把幺鸡当二条，胡不了还点炮。

二、盒子四兄弟：margin → border → padding → content

手绘一张剖面图：

┌------------------------┐
│       margin (外补丁)   │
│  ┌------------------┐  │
│  │     border       │  │
│  │  ┌--------------┐ │  │
│  │  │   padding    │ │  │
│  │  │ ┌-----------┐│ │  │
│  │  │ │  content  ││ │  │
│  │  │ └-----------┘│ │  │
│  │  └--------------┘ │  │
│  └------------------┘  │
└------------------------┘

记忆口诀：
“外边距像社交距离，边框像口罩，内边距像秋衣，内容才是肉身。”

三、width 到底是谁的宽？

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

问：浏览器实际占用多少像素？
答：300 + 20×2 + 5×2 = 350px（margin 不算占地，只是外部呼吸区）

但注意！
box-sizing: content-box（默认）→ width 只给 content 嫖；
box-sizing: border-box → width 一口气包含 padding + border，开发最爱。

一行代码拯救数学恐慌：

* { box-sizing: border-box; }

从此 width 说 300 就 300，像相亲资料写 180，实打实不穿增高鞋。

四、margin 折叠：兄弟互砍，高度蒸发

现象：上下两个块级盒子，各设 margin: 30px，理论上间隙 60px，
结果浏览器只给 30px，另外 30px 被“折叠”了！

<div class="a">上盒</div>
<div class="b">下盒</div>

.a { margin-bottom: 30px; }
.b { margin-top: 30px; }

折叠规则

1. 只发生在垂直方向（左右不会）。
2. 兄弟之间、父子的第一个/最后一个子元素都会。
   解决套路：
3. 用 padding 代替 margin；
4. 或给父元素加 padding-top: 0.1px（触发 BFC，折叠失效）。

五、border 不只是“边框”

常规用法：

border: 1px solid #e5e7eb;

骚操作：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid #f43f5e;
}

原理：四个 border 交接处是斜角，把内容压成 0，就只剩四个三角形。
结论：用 border 能画三角、梯形、箭头，零图片纯 CSS，性能贼快。

六、padding 的“百分比”陷阱

.square {
  width: 30%;
  padding-bottom: 30%;   /* 相对于父元素宽！ */
  background: #a3b18a;
}

高与宽永远 1:1，正方形随屏幕等比缩放，做响应式卡片、头像框爽到飞。
记住：百分比 padding 只认父级 width，跟 height 无关，物理老师都不敢这么任性。

七、实战：用盒子模型做“朋友圈九宫格”

HTML：

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  …共 9 个…
</div>

CSS：

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -2px;        /* 负边距抵消最外缝隙 */
}

.item {
  width: 33.333%;
  padding-bottom: 33.333%;
  border: 2px solid #fff;
  box-sizing: border-box;
  background: url(img.jpg) center/cover;
}

解释：

• width 与 padding-bottom 相等 → 正方形；
• 边框当缝隙 → 无需计算 margin；
• 负 margin 把最外 2px 吃回去 → 九宫格与屏幕边缘贴贴。

成品效果：无论屏幕多宽，九宫格永远正方，像强迫症的天堂。

八、祖传避坑指南

九、课后作业：画一个“对话气泡”

要求：

• 纯 CSS，一个 div 搞定；
• 带小三角箭头；
• 背景 #f43f5e 女团粉；
• 圆角 8px；
• 宽高自适应文字。

提示：border 画三角 + ::before 定位。
做好 CodePen 或截图甩评论区，最优雅代码送“CSS 三角尺”鼠标垫一张（电子版，自己印）。

十、下集预告

盒子会摆了，但老板又喊：
“右上角来个关闭按钮，要固定在视口，随滚不动！”
下一篇《定位与布局：把 div 当乐高，拼出九宫格还是巴黎铁塔随你》，
彻底解锁 position: static/relative/absolute/fixed/sticky 五兄弟。
别走开，系列文持续连载，关注防走丢！

（完）