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

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的缩写，意思是弹性布局；用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。即：display：flex；

注：设置了flex布局后当前容器内子元素的float、clear、vertical-align属性将全部消失

Flex基本概念
采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为容器项目

容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end ;交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.

弹性盒的版本

容器的属性

1、display:flex
设置为弹性盒（父元素添加）
2、flex-direction (主轴的方向)
说明：指定了弹性子元素在父容器中的位置
row 默认在一行内排列
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

3、justify-content(主轴对齐方式)
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
■ flex-start 默认，左对齐
■ flex-end 右对齐
■ center 居中对齐
■ space-between 两端对齐，中间自动分配
■ space-around 自动分配距离

4、align-items（侧轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高度）

5、flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。

6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’> 属性类似。注：本属性在只有一行的伸缩容器上没有效果。
■ flex-start没有行间距
■ flex-end底对齐没有行间距
■ center居中没有行间距
■ space-between两端对齐，中间自动分配
■ space-around自动分配距离

项目属性，以下属性设置在项目上
7、align-self
align-self 属性规定灵活容器内被选中项目的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。

auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
Stretch元素被拉伸以适应容器。
Center元素位于容器的中心。
flex-start元素位于容器的开头。
flex-end 元素位于容器的结尾。

Internet Explorer 和 Safari 浏览器不支持 align-self 属性。

8、order

number排序优先级，数字越大越往后排，默认为0，支持负数。

9、 flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
	  flex-grow: <number>;
      }

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

10、 flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
11、 flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
12、 flex
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

css3多列分栏布局

1.column-count：auto | 整数；—控制栏数
2.column-width：value；—每栏的宽度
3.column-gap : value ;—两栏之间的间距
4.column-rule : 宽度，线型，颜色；—栏与栏的间隔线
类似border，solid | dotted | dashed 实线 | 点线 | 虚线

column-width和column-count这两个属性提供了分栏的标准，只写其中的一个
column-gap和column-rule就处在相邻两列之间

让某个元素跨栏加到某个元素上：column-span : all / none ; 是否跨栏显示