一、盒模型
盒子模型从独立盒子结构以及多盒之间的关系两方面理解
盒子模型概念
独立盒子模型由：内容、border、padding、margin 四部分组成
- 标准盒模型（w3c标准）的实际宽高 = width / height (内容宽高) + padding + border + margin
- 怪异盒模型（IE标准）的 weight 和 height 包含了 padding 和 border
怪异盒模型的实际宽高 = width / height (内容宽高 + padding + border) + margin
可以通过属性box-sizing来设置盒子模型的解析模式
- content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)
- border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型
- padding-box：将padding算入width范围
盒子之间的关系
有标准流模式、“浮动”属性、“定位”属性
1. 标准文档流 / 标准流
指不使用一些特殊的排列和定位的 css 样式
块级元素
在父元素中会自动换行，且跟同级的兄弟元素按照出现的顺序依次垂直排列，宽度自动铺满父元素宽度
div、h1 -h6、 p 、pre 、hr、menu、noframes、noscript、dl、ul、ol 、fieldset、form、table行内元素
在父元素中水平排列，直到父元素的最右端才自动换行
span, strong, em, br, img , input, label, select, textarea, cite, a，sub，sup
行内元素设置的width和height无效，设置margin和padding只有左右边距有效
2. 盒子在标准流中的定位
用margin控制盒子与盒子之间的位置关系
（1）两个行内元素相邻时距离：左边的margin-right+右边的margin-left；
（2）不是行内元素，有换行效果的块级元素：上下间的距离是两者中的较大者，如上面的margin-bottom大于下面的margin-top，距离就取margin-bottom。
（3）当div嵌套时，子元素的margin将以父元素的内容区域为参考。
“标准流”中，块级元素没有设width和height时，默认宽度会自动延伸到父元素的内容区域为限，高度为包容下内容的最小高度。如果设置了width和height，就以值来显示。
（4）当margin为负数时。被设为负数的往相反方向移动，甚至会覆盖在其他元素上。当块级元素间形成嵌套的父子关系时，margin设为负数可以使子元素从父元素中分离出来
3. 盒子的浮动（float）
设置浮动后，盒子的宽高也会有改变。要清除浮动。也就是：（块级元素设置为浮动后，将脱离“标准流”，但还占据着父元素的空间，父元素的高度不再受浮动的子元素的影响，而由没浮动的其他子元素高度确定。）
4. 盒子的定位（position）
- static（静态定位）
表示元素在标准流中的默认位置。无任何效果。为默认值。 - relative（相对定位）
指定为relative后还要指定一定的偏移量，水平方向left、right，垂直方向top、bottom。
偏移量是指与它原来所处的位置的移动距离。
可以描述如下：
1）.相对定位，是以元素恩深在“标准流”中或者浮动的原本的位置为基准，通过偏移达到新位置。
2）.仍在标准流中，对父元素和兄弟元素无任何影响，即使由于偏移移到了父元素外边，其他元素也还在原来位置，不会顶上来。 - absolute（绝对定位）
也需要指定偏移量。
1）.绝对定位，从标准流中脱离，他们对其后的兄弟元素无任何影响。
2）.使用绝对定位的元素，以它“最近”的一个“已经定位”的“祖先元素”为基准进行偏移，如果没有已经定位的祖先元素，则以浏览器窗口为基准进行偏移。
3）.所谓已经定位：指position有设置，且不是设置为static的任意一种方式。 - fixed（固定定位）
以浏览器窗口为根据。
二、标准流 / 正常流
感性认识：简单且符合直觉，依次排列，排不下换行
拓展规则：
- float 规则：
使盒占用了正常流需要的空间，可以理解为“文字环绕” - vertital-align 规则：
规定如何在垂直方向对齐盒 - margin 规则：
规定了元素自身周围所需要的空间
概念
- 格式化上下文
CSS 计算排版和布局的算法需要依赖一个排版的“当前状态”，这个当前状态称为“格式化上下文” - 盒
块级盒（行级盒）：使用块级格式化上下文
行内级盒：使用行内级格式化上下文
排版基本规则
当我们要把正常流中的盒或文字排版，需要分为三种情况
- 当遇到块级盒：排入块级格式化上下文
- 当遇到行内级盒或文字：首先尝试排入行内级格式化上下文，如果排不下，那么创建一个行盒，先将行盒排版（行盒是块级，所以到第一种情况），行盒会创建一个行内级格式化上下文。
- 遇到 float 盒：把盒的顶部跟当前行内级上下文上边缘对齐，然后根据 float 的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。
部分元素会在其内部创建新的块级格式化上下文：
- 浮动定位
- 绝对定位元素
- 非块级但仍能包含块级元素的容器（如 inline-blocks, table-cells, table-captions）
- 块级的能包含块级元素的容器
