视觉格式化模型
英文：visual formatting model,CSS的一种机制，它规定了页面中的多个盒子如何布局
元素在包含块中的位置和尺寸，主要受两个因素影响：元素盒模型、元素的定位体系
定位体系概述：
视觉格式化模型规定，定位体系一共有三种：常规流，浮动（float），绝对定位（absolute positioned）
任何一个元素必须属于其中一种定位体系
不同的定位体系中，元素再包含块中的尺寸和位置会有一些差异
定位体系判定：
默认情况下元素为常规流定位
常规流定位：
- 块级元素（block）：占满整个可用空间的宽度（整行），自动换行
- 行内元素（inline）：每个行内元素紧挨着显示，直到占完可用空间宽度再换行
定位体系判定：
先判断position的值是absolut或fixed吗？是，即为绝对定位，否，则再判断float的值是left或right吗？是，即为浮动，否，则为常规流
position默认值为static float默认值为none
盒模型中的尺寸：只有margin可以取负值，auto按照不同定位体系的规定计算
常规流：
又叫普通流、文档流、普通文档流、常规文档流
盒模型中的auto值--水平方向：
常规流盒子水平方向上的尺寸，必须等于包含块的宽度，当包含块的宽度大于子元素的宽度时：如果margin left(和right)：auto width：auto时，占满整个空间的就是width；如果margin left(和right)：auto width：10px时，margin占满剩余空间，实现width水平居中；如果margin left：10px margin right：auto width：auto时，右侧被width占满；如果margin left：10px margin right：10px width：10px,且三个值加起来仍小于包含块的宽度指时，则右侧的margin变成自动（auto）填充剩余空间
盒模型中的auto值--垂直方向：
margin为auto：0px height为auto:适应内容的高度
包含块：
containing block，每一个元素都有一个包含块，它是指元素再页面中摆放的区域，通常情况下，元素的包含块是它父元素的内容盒
视口：
viewport，可视窗口，通常指浏览器的可视区域，不同设备上的可视区域不一样