主要内容
1.Css3盒模型
2.Css3弹性盒模型
3.多列布局
CSS3盒模型
怪异盒模型（ie8以下）
一、css3增加了盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式。
box-sizing：content-box border-box inherit
content-box(css2)
元素的宽 = width + padding + border
border-box(css3)
元素的宽 = width（包含padding和border）
二、伸缩布局盒模型
css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。
主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex 使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。
flexbox布局功能主要具有以下几点：
1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
2、指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；
3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5、控制元素在页面上的布局方向；
6、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。
flexbox模型中的专业术语：
1、主轴和侧轴
2、主/侧轴、侧/侧轴方向
3、主/侧轴起点、主/侧轴终点
4、主/侧轴长度
5、伸缩容器和伸缩项目
弹性盒模型的使用：
声明伸缩容器（父元素）：display：flex；需要加前缀
display：-webkit-flex；
display：-moz-flex；
display：-ms-flex；
display：-o-flex；
display：flex；
伸缩项目（子元素）
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
-o-flex:1;
flex:1;
伸缩容器属性：
1、伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向（父元素上）
row：从左向右
row-reverse：与row相反；
column：从上到下
column-reverse：与column相反；
2、伸缩换行 flex-wrap：（定义在伸缩容器（父元素）上）
nowrap 不换行 默认值，不管超出还是不超出都不会换行
wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行
wrap-reverse 换行反向 主轴水平时，上下反向，主轴垂直时，左右反向；
注意：当弹性容器宽、高都不固定时，wrap属性下，元素会自适应屏幕显示多行；当弹性容器宽、高都固定且大于元素总宽度，则wrap、wrap-reverse 会相应的有效；（以chrom浏览器为主测试）
3、伸缩流方向与换行 flex-flow 复合属性（flex-flow：flex-direction，flex-wrap）
flex-flow：flex-direction || flex-wrap
两个值同时定义或者单独定义都生效
4、主轴对齐 justify-content （水平对齐方式）主要用来定义伸缩项目沿主轴线的对齐方式；（定义在伸缩容器（父元素）上）
flex-start：伸缩项目向一行的起始位置靠齐；
flex-end：伸缩项目向一行的结束位置靠齐；
center：伸缩项目向一行的中间位置靠齐；
space-between：伸缩项目会平均的分布在行里；
space-around：伸缩项目会平均的分布在行里，两端保留一半的空间；
5、侧轴对齐 align-items（单行垂直对齐试） 伸缩项目行在侧轴上的对齐方式（定义在伸缩容器（父元素）上）
flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；
center：伸缩项目的外边距盒 在该行的侧轴上居中放置；
baseline：伸缩项目根据伸缩项目的基线对齐；
（有内容时，按照文字的基线对齐，没有内容时会按元素的基线对齐）
stretch：伸缩项目拉伸填充整个伸缩容器。
注：stretch是把它的高度进行拉伸，确保没有高度的情况下，如果有高度会跟高度走，没有高度会进行拉伸，不定议高度是默认值拉伸
6、align-self（单个垂直对齐方式）：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items（定义在子元素里）。
7、堆栈伸缩行（多行垂直对齐方式） align-content 定义多个伸缩行的对齐方式，往往要与换行同时应用（换行时才用）
flex-start：各行向伸缩容器的起点位置堆叠；
flex-end：各行向伸缩容器的结束位置堆叠；
center：各行向伸缩容器的中间位置堆叠；
space-between：各行在伸缩容器中平均分布；
space-around：各行在伸缩容器中平均分布，两端保留一半的空间；
stretch：各行将伸展以占用额外空间。（默认值）
伸缩项目属性：
1、 显示顺序 order 默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order属性改变伸缩项目的顺序
不定义order的伸缩项目会排到前面
order：1； 排第一
order：2； 排第二
order:number数字越大越往后排，默认为0，支持负数。
拓展：
2、伸缩性flex：设置或检索弹性盒模型对象的子元素如何分配空间
flex:2;
flex-grow 是扩展比率
flex-shrink 是收缩比率
flex-basis 伸缩基准值 分配多余空间之前，项目占据的主轴空间
三、多列布局
css3多列布局可以自动将内容按指定的列数排列，这种特性实现的效果和报纸、杂志类排版非常相似。
核心属性：
columns：column-width 列宽 column-count 列数
column-width：定义每列列宽； 类似于最小宽度min-width； auto 自适应；
column-count：定义分列列数；最多列数，auto自适应（由列宽、容器宽和列间距决定），也可固定
column-gap：定义列间距； 不能为负数；
column-rule：定义列边框；与定义边框一样：2px dashed #ccc;
column-span：定义多列布局中子元素的跨列效果；通常用于标题；
none：不跨列；
all：跨所有列
多列实现瀑布流
break-inside: avoid (避免在主体框中插入任何中断（页面，列或区域）)
break-inside属性指在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。
取值
auto允许（但不强制）在原理框中插入任何中断（页面，列或区域）。
avoid避免在主体框中插入任何中断（页面，列或区域）。
avoid-page避免原理框中的任何分页符。
avoid-column避免原理框中的任何列中断。
avoid-region避免原理框中的任何区域中断。
