1. 盒模型
1.1 概述
当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。
盒模型由内到外由四个部分组成：content area, padding area, border area, margin area
- 内容区域 content area ，由内容边界 (content edge) 限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为 content-box width 和 content-box height。如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。
- 内边距区域 padding area，由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box width 和 padding-box height。内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。
- 边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box width 和 border-box height。边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。
- 外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
【width、height与min-width、max-width、min-height、max-height冲突时，以后者为准】
【行内可替换元素可通过width、height定义占用空间，普通行内元素的width和height无效，只能通过line-height定义占用空间】
1.2 Margin Collapse
2. box-sizing
为了兼顾IE怪异模式，CSS3对盒模型进行了改善，定义了box-sizing属性，该属性能够事先定义盒模型的尺寸解析方式。
box-sizing:content-box | border-box | inherit;
3. 显示类型
3.1 块级盒子（Block box）和内联盒子（Inline box）
在常规网页设计中，CSS把标签分为两种基本显示形态：Block（块状）和 Inline（行内）。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为。
block box特点：
- 默认100%宽度，即占用父容器在内联方向上的所有可用空间
- width、height有效
- 产生换行（即使并没有占用一整行）
- padding、margin、border会应用且会把其他元素从当前盒子周围推开
inline box特点：
- 不产生换行
- width、height无效（行内替换元素除外）
- 垂直方向的padding、margin以及border会被应用但是不会把其他处于 inline 状态的盒子推开
- 水平方向的padding、margin以及border会被应用且会把其他处于 inline 状态的盒子推开
3.2 常规流/普通流（normal flow）
上述的block和inline都是指的盒子的外部显示类型。同时盒模型还有内部显示类型，它决定了盒子内部是如何布局的。默认情况下（内部）是按照 normal flow 布局。
normal flow 常被称作常规流、普通流、正常文档流、文档流。
CSS2.1的英文文档中本身没有 document flow（文档流）的概念，只有作为 positioning schemes 的 normal flow。偶尔会在一些英文文章中看到 normal document flow 的说法，实际上说的就是 normal flow。而“文档流”这个翻译针对的就是 normal document flow。所以如果面试官说“脱离文档流”，指的就是“脱离常规流”。
以上概念只要理解了一般不会产生误解，但无意间看到篇 blog 写的很具迷惑性：
What Is Document Flow? (soulandwolf.com.au) 其中对 documnet flow 做了一个非官方的总结：
文档流是页面元素的排列（arrangement），由 CSS 定位语句（CSS positioning statements）和 HTML 元素的顺序（order）定义。也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。 也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。
一些国内的翻译（什么是文档流？ - 掘金 (juejin.cn)）更是据此总结道：
文档流一共分为4种：
- 正常文档流 normal document flow
- 显示类型 display type
- 浮动框 float
- 定位 position
原来除了 normal document flow，其他几种都算 abnormal document flow 的吗？
以上说法固然不能算错（毕竟没有官方定义的document flow），但却使得理解变得更加困难：如果把页面元素的排列统统归为 document flow，又该怎样理解“脱离文档流”的 absolute 元素：
是只脱离了 normal flow 但仍属于document flow（所谓的 abnormal document flow）？还是彻底脱离了 document flow？
官方文档（Visual formatting model (w3.org)）的定义：
Absolutely positioned boxes are taken out of the normal flow.
答案自然是前者，于是 document flow 在这里显得十分多余。（建议不要对这个概念加以记忆）
3.3 定位元素如何脱离 normal flow 的
与浏览器的渲染规则有关：normal flow 中非 positoned element 元素，总是先于 positioned element 元素渲染，所以表现就是在 positioned element 下方，跟它在HTML中出现的顺序无关。而 positioned element 又会根据 stacking context、z-index、back-to-front 等规则进行堆叠
3.4 内部和外部显示类型
CSS中，可以使用display改变元素的显示类型。CSS2.1中，display属性共有18个选项值。CSS3新增了显示类型（弹性盒）。
常用显示类型都可以划归为block和inline两种基本形态，其他类型都是这两种类型的特殊显示。其中真正能够应用并获得所有浏览器支持的取值只有4个：block、none、inline、list-item。
给一个元素设置display后，将会决定这个盒子的两个显示类型：
（1）outer display type：决定该元素本身如何布局的，即参与何种格式化上下文
（2）inner display type：将该元素当成容器，规定了其内部子元素如何布局，参与何种格式化上下文
- CSS 基础框盒模型介绍 - CSS（层叠样式表） | MDN (mozilla.org)
- 常规流中的块和内联布局 - CSS（层叠样式表） | MDN (mozilla.org)
- 盒模型 - 学习 Web 开发 | MDN (mozilla.org)
- CSS属性参考 | height_jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)