CSS盒模型与正常流排版

一、盒模型

盒子模型从独立盒子结构以及多盒之间的关系两方面理解

盒子模型概念

独立盒子模型由：内容、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 样式

1. 块级元素
   在父元素中会自动换行，且跟同级的兄弟元素按照出现的顺序依次垂直排列，宽度自动铺满父元素宽度
   div、h1 -h6、 p 、pre 、hr、menu、noframes、noscript、dl、ul、ol 、fieldset、form、table

2. 行内元素
   在父元素中水平排列，直到父元素的最右端才自动换行
   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 的方向把盒的对应边缘对到块级格式化上下文的边缘，之后重排当前行盒。

部分元素会在其内部创建新的块级格式化上下文：

1. 浮动定位
2. 绝对定位元素
3. 非块级但仍能包含块级元素的容器（如 inline-blocks, table-cells, table-captions）
4. 块级的能包含块级元素的容器