3.2 盒模型与文档流：一切都是盒子
3.2 盒模型与文档流：一切都是盒子
本节摘要：浏览器把每个元素当作矩形盒子处理，盒子分内容、内边距、边框、外边距四层；尺寸声明有两种计算口径，边框盒口径让布局心算直达。本节讲四层职责与合并口径的选择、外边距合并这个经典意外、常规流的排布规律与脱离常规流的三种方式，并给看板铺好页面框架的尺寸体系。
一、先量盒子，再谈布局
装修班没有卷尺就没法开工。样式班的卷尺是盒模型：内容区装正文，内边距是内容与边框之间的缓冲，边框画出盒子轮廓，外边距是盒子与邻居之间保持的距离。四层从内到外各司其职，元素的占位尺寸由它们相加决定。所有布局问题最终都会落到"这个盒子多大、它和邻居隔多远"这两个度量上。
图 1：盒模型四层剖面
二、口径选择与全站统一
尺寸声明有两种计量口径。默认的内容盒口径下，声明的宽度只覆盖内容区，内边距与边框另算——想摆一个宽二百四十加缓冲二十的卡片，得倒推出声明宽度写二百。边框盒口径把三者打包计量，声明即占位，心算消失。现代项目的通行做法是全站统一切到边框盒口径，一条通配规则完成切换。
/* 看板的度量衡：全站边框盒口径 */ *, *::before, *::after { box-sizing: border-box; /* 通配切换：所有元素及伪元素的宽高都按含内边距与边框计量 */ } .stat-card { width: 240px; /* 声明多少占多少，缓冲与边框都包在里头 */ padding: 16px; /* 内容与边框间留出呼吸 */ border: 1px solid #dde1e6; margin: 12px; /* 与相邻卡片保持距离 */ }
/* 同一个卡片，两种口径的对照心算 */ /* 边框盒：宽 240 = 内容 207 + 内边距 32 + 边框 2（一次性写对） */ .stat-card { box-sizing: border-box; width: 240px; padding: 16px; border: 1px solid; } /* 内容盒：想占 240，得声明 240-32-2=206，改一次缓冲全盘重算 */ .stat-card-legacy { box-sizing: content-box; width: 206px; padding: 16px; border: 1px solid; }
口径统一的反面案例在接手老项目时最常见：老代码用内容盒、新模块用边框盒，同一份数值在两套口径下占位不同，页面对不齐又查不出原因。接手任何项目先查通配口径规则，是样式班老师傅的第一反应。
三、文档流：默认排布与它的例外
不写任何布局规则时，元素按文档流排布：块级元素从上到下依次独占一行，行内元素在一行内从左到右排满换行。文档流是布局的零成本默认值，理解它才能知道什么时候值得动用 3.4 节的布局机械——很多"看起来需要浮动"的老代码，其实只是不熟悉默认流的自然能力。
文档流的三个例外值得单独记：浮动让盒子贴向一侧、文字环绕其后（历史上被滥用做布局，如今回归文本环绕的本职）；绝对定位让盒子跳出文档流、相对最近的定位祖先摆放；固定定位相对浏览器视口摆放、滚动不动。三种例外各有正当用途，共同点是"离开主流就要自己负责位置"，用之前先问默认流与布局机械是否已经够用。
/* 看板上的定位实战：状态徽章的角标 */ .stat-card { position: relative; } /* 相对定位：卡片原地不动，但成为角标的定位祖先 */ .stat-card .flag { position: absolute; /* 绝对定位：跳出文档流，相对卡片摆放 */ top: -8px; /* 卡片顶边上探 8 像素 */ right: -8px; /* 右侧对齐外探，形成角标效果 */ background: #d9534f; color: #fff; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; /* 行高等于高度：单字角标垂直居中 */ text-align: center; font-size: 12px; }
/* 外边距合并：文档流的经典意外 */ .section-a { margin-bottom: 24px; } .section-b { margin-top: 16px; } /* 相邻两节的间距不是 40，而是 24——垂直外边距相遇取大者 */ /* 需要精确控制时的两种解法 */ .section-wrap { padding: 1px 0; } /* 解法一：父级加内边距隔开 */ .section-b { display: flow-root; } /* 解法二：建立新的排版上下文 */
外边距合并的规则简单粗暴：垂直方向相邻的外边距合并成一条，取大者。新手在这上面栽的跟头通常表现为"间距怎么和写的不一样"，排查一小时发现是合并。两种解法里，建立新排版上下文的写法语义更明确，现代代码优先用它。
四、行内与块级的转换
显示属性决定盒子参与哪种排布：块级独占一行可设宽高，行内不换行但设宽高无效，还有一类行内块级两者兼得（不换行又能设尺寸）。历史上图片就是行内块级的代表，与文字基线对齐产生的"图片下方神秘缝隙"困扰过无数人——根源是行内盒子为字母下延部预留的空间，解法是把图片的显示改为块级或调整垂直对齐。
/* 看板侧栏照片的基线缝隙处理 */ .workshop-photo img { display: block; /* 图片转块级：基线缝隙随之消失 */ max-width: 100%; /* 宽度不超过容器：3.6 节响应式的伏笔 */ height: auto; /* 高度按比例自适应，不变形 */ } /* 导航链接的点击面积优化 */ .workshop-nav a { display: inline-block; /* 行内块级：不换行，但可设内边距 */ padding: 6px 12px; /* 扩大点击面积，触屏用户的手指说谢谢 */ }
这一节的收尾提醒：显示属性、定位、浮动都能改变排布，但它们是"手术刀"级别的一次性手段；系统性的排列对齐请直接上 3.4 节的布局机械，那是为批量排版设计的正规军。
⚠️ 常见坑：负外边距能实现压叠效果，也被广泛用于布局微调，但它让盒子越界占位，一旦邻居变动就会互相穿插。用负值时问自己：这是精确的装饰性压叠，还是在逃避本该用布局机械解决的问题？
💡 关键直觉：把页面想象成一行行码放的纸箱——默认流免费帮你码，只有当"要横排、要对齐、要分格"超出默认能力时，才值得动用布局机械。先穷尽免费手段，再上重型装备。
本节要点回顾
- 四层结构：内容装正文、内边距做缓冲、边框画轮廓、外边距保持距离；
- 口径统一：全站切换边框盒口径，声明即占位，接手老项目先查通配规则；
- 文档流：块级纵排、行内横排是零成本默认值，例外手段用前先问是否必要；
- 外边距合并：垂直相邻取大者，精确间距靠内边距隔离或新排版上下文；
- 基线缝隙：行内图片与文字基线对齐留缝，转块级即除；
- 手术刀纪律：显示转换与定位解决个案，批量排版交给布局机械。
卷尺备好，下一节开涂料库：文本、颜色与背景，给看板上第一层妆。