第 3 章 · 布局与排版
你往屏幕上放一个按钮，它凭什么停在那个位置、是那个大小？上一个像素都能画出来的时代（第 2 章），这个问题有个粗暴答案：我指定坐标。但屏幕一大、内容一多、设备一杂，写死坐标立刻变成灾难。这一章讲的是一场持续三十年的思想革命：布局从「写死坐标」走向「讲关系」——盒子之间谁包含谁、谁挨着谁；一排元素沿哪条轴、按什么队形；整页如何先画格子再对号入座；原生世界干脆把布局变成解方程。六节读完，界面上任何一个元素的「待位」，你都能说出它的来历。
本章要回答什么
为什么明明没设间距，两个段落之间却有一段「多余的空白」？float 这个老古董当年到底解决了什么问题、今天还能不能用？导航条图标怎么均匀分布、商品卡片怎么永远等高？报纸式的多栏复杂排版怎么落地？手机 App 的布局为什么长成一串「约束」而不是一堆坐标？以及最现实的——同一套界面，怎么在 4 寸手机和 27 寸显示器上都活得体面？
布局一套界面，像装修一套房子。
盒模型是木料规格——每块板的实际占位要算上衬里和缝隙，光量板芯会全部算错；
文档流是毛坯房的默认规则——东西从上到下、从左到右依次进场；
Flexbox是一面墙前的家具摆法——沿一条线排开、对齐、能屈能伸；
Grid是整面墙的施工图纸——先弹线画格，家具对号入座；
约束布局是全屋定制的量尺逻辑——不问「放在哪」，只问「A 离 B 多远」；
响应式是那套变形家具——户型变了，桌子自己换形态，五金件永远一套。
本章的六节
盒模型
content / padding / border / margin——一切布局的原子，也是「宽度怎么量」的百年公案。
流式与定位
文档流、浮动、absolute / fixed / sticky 的取舍——默认规则与五种例外。
Flexbox 弹性布局
主轴交叉轴、六大对齐、伸缩算法——一维排队的现代答案。
Grid 网格
轨道、fr、命名区域、auto-fill——真正的「报纸排版」能力。
约束布局
AutoLayout / ConstraintLayout——原生 App 的布局，本质是解方程。
响应式与自适应
媒体查询、断点、容器查询——一套界面，适配所有屏幕。
六节是一条演进路
1. 盒子 · 1996
CSS 诞生即有盒模型——先搞清「一个元素占多大地方」。
2. 流 · 默认规则
不写任何布局代码时元素怎么排——以及 float、position 五种例外。
3. 弹性 · 2015
Flexbox 全浏览器就位：一排盒子听容器统一指挥。
4. 网格 · 2017
Grid 落地：二维图纸级排版，Web 终于有了「真正的布局系统」。
5. 约束 · 原生答案
App 世界殊途同归：布局即方程，位置是解出来的。
6. 变形 · 世界观
响应式收官：承认屏幕千变万化，于是不写死任何数字。
学之前先记住这一点
- 盒子不等于内容width 默认只量 content——要算上 padding / border / margin 才是真实占位；border-box 是救命开关。
- 布局不写坐标，讲关系从文档流的「依次排」到约束的「解方程」，整章是一场从死数字到活关系的思想革命。
- Flex 管一维，Grid 管二维一行图标用 Flex，整页骨架用 Grid——它们是同事，不是对手。
- 老工具没死，只是各归本职float 回去做文字环绕，absolute 去做局部层叠——别拿偏方当主力。
- 响应式是收官也是日常前五节的每件工具都自带弹性基因——学布局，从一开始就在学响应式。