弹性盒和怪异盒模型、多栏布局

1、怪异盒模型
浏览器对盒模型的解析一共有两种模式，一种是标准模式，另一种就是怪异模式。
一般在页面头部声明了DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

标准盒模型和怪异盒模型的区别：
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

box-sizing：content-box

box-sizing:border-box

Css3中box-sizing：属性让两种盒模型相互转变

box-sizing ： content-box || border-box || inherit;

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

新版盒模型
Flex布局是什么？
传统 的布局方案，是基于盒模型，依赖display+position+float，但是对于特殊的布局就非常的不方便，如：垂直居中，2009年为w3c提出一种新方案-----flex布局，目前兼容的浏览器有：

在未来flex布局将成为布局的首选方案
Flex是flexinle Box的缩写，意思是弹