一、基本概念
视觉格式化模型：CSS的一种机制，它规定了页面中的多个盒子如何布局
• 视觉格式化模型是一套非常复杂的机制，包含错综复杂的CSS规范
• 本章的课程从实用的角度出发，仅学习在划分页面区域的时候需要的核心知识
• 由于划分页面区域时几乎都使用的是块盒，因此，本章仍然只涉及块盒
视口：一种可视化的窗口，大小和内容无关
包含块（containing block）：每个元素都有一个包含块，它是指元素在页面中摆放的区域
通常情况下，元素的包含块是它父元素的内容盒（content-box）
HTML没有父元素，是初始化包含块
二、定位体系概述
元素在包含块中的尺寸和位置，主要受到两个因素的影响：元素的盒模型和定位体系
定位体系一共有三种：
常规流（normal flow）
浮动（float）
绝对定位（absolute positioned）
不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
定位体系判定：
如果某个元素，分别为它声明了下面的样式：
position:absolute; 定位体系是：绝对定位
float:left; 定位体系是：浮动
position:absolute; float:left; 定位体系是：绝对定位
position:static; float:left; 定位体系是：浮动
/* 未声明样式 */定位体系是：常规流体系
三、盒模型和定位体系
盒模型就是盒子的尺寸，定位体系等于盒子位置
盒模型中的尺寸：
margin：px、em、%、auto
border：px、em
padding：px、em、%
width：px、em、%、auto
height：px、em、%、auto
margin、padding、width的百分比：是包含块宽度的百分比
盒模型中的尺寸 — auto
尺寸受到定位体系的影响，不同的定位体系，auto的计算规则不一样
常规流，浮动，绝对定位：对auto值的影响，对盒子在包含块中位置的影响
四、常规流
常规流，又叫做普通流、文档流、普通文档流，是最常见的定位体系，所有元素默认都是常规流。
水平方向：如果不行，则强行将margin-right设置为auto
常规流盒子水平方向上的尺寸，必须等于包含块的宽度。
垂直方向：margin为auto：0px
height为auto：适应内容的高度
盒子位置：依次摆放：按照HTML元素的书写顺序从上到下摆放
盒子在包含块中占据的尺寸是整个盒子的尺寸
垂直方向上，若两个外边距相邻，则进行合并（折叠）
垂直方向：水平方向上的外边距不会合并
外边距相邻：两个外边距之间没有border、padding和content
合并：均为正数取最大，均为负数取最小，一正一负则相加
浮动：当元素为left和right时为浮动
盒子位置：
左浮动的盒子向上向左排列
右浮动的盒子向上向右排列
浮动盒子的顶边不得高于上一个盒子的顶边
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
五、当常规流遇上浮动
常规流盒子和浮动盒子混合摆放
清除浮动
常规流盒子和浮动盒子混合摆放
浮动盒子在摆放时，要避开常规流盒子
常规流盒子在摆放时，无视浮动盒子
常规流盒子的自动高度计算时，无视浮动盒子
高度坍塌：常规流盒子的高度无视浮动盒子
清除浮动：clear
None：不清除浮动
Left：清除左浮动，元素在左浮动的盒子下方摆放
Right：清除右浮动，元素在右浮动的盒子下方摆放
Both：清除左右浮动，元素在浮动的盒子下方摆放
对最后一个子元素使用clear:both，可防止父元素高度坍塌
六、盒子的相对位置
是指相对于盒子在原本定位体系下的位置，position属性设置为relative，以启用相对位置
取值：static：静态位置，盒子在原本定位体系下的位置
Relative：相对位置，盒子相对于原本的位置进行偏移
Absolute：绝对位置
Fixed：固定位置
盒子偏移后，不会对其他盒子造成任何影响。Left，right，top，botton只能出现两个
绝对定位：如果元素被设置为绝对定位，float属性会被强制设置为none
绝对定位元素不会对其他任何元素造成任何影响
绝对定位可以通过left，right，botton，top来设置
七、堆叠级别
堆叠级别（stack level）：它决定了元素谁显示在前谁显示在后
通常情况下，堆叠级别越高，显示越靠前
通过z-index属性可设置元素的堆叠级别
使用z-index属性时需要注意的：不要用于静态位置的元素，尽量不要使用z-index
八、块级格式化上下文
全称Block Formatting Context，简称BFC
它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局：常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
具体规则：
创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并