首先，新增的布局属性需要添加各浏览器的私有前缀。-moz,-webidt,-ms,-o
1，多列布局 ——cloumns
cloumns:200px 3;
200px: 定义多列中每列的宽度
3：定义多列中的列数
相当于 cloumns-width:200px; cloumns-count:3
如果要调整列与列直接的间距，可以使用
column-gap:2em;
如果要用来定义列与列之间的边框宽度，边框样式和边框颜色，他不占用任何空间
位置。
column-rule:2px dottoed green;
如果一个分列元素中的子元素需要跨多列，那么需要用到
column-span：none|all
all :跨越所有
2,盒子模型——box-sizing
在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相
同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border
以及元素实际尺寸的计算关系
box-sizing:content-box ; border-box ;inhert
在自适应布局中，在元素基础上添加内距padding,按照标准盒模型解析，往往会将布局撑破，
但使用border-box，便可以解决。
3，伸缩布局——flexbox布局
响应式不可缺少的，
功能：
（1），屏幕和浏览器窗口大小发生改变可以灵活调整；
（2），可以指定伸缩项目沿主轴或侧轴按比例分配的额外空间，从而调整伸缩项目的大小；
（3），可以指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前，之后或
之间；
（4），可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
（5），可以控制元素在页面上的布局方向；
（6），可以按照不同的DOM所指定排序方式对屏幕元素重新排序。也就是说可以在浏览器渲
染中不按照文档流先后顺序重排伸缩项目顺序。
使用方法：
（1），创建一个flex容器
.flexContainer{
dispaly:-webkit-flex; //Safari需要前缀
display:flex;//给元素设置display值为flex
}
(2),Flex项目显示
flex的项目应为flex容器的子元素，是沿这主要轴和横轴定位。默认的是沿着水平轴排列一行。可以
通过flex-direction来改变主轴的方向,（column,row）(Safari需加前缀)
(3),Flex项目移动到顶部
flex项目移动到顶部，取决于主轴的方向，如果他是垂直的方向通过align-items设置;如果它是水平
方向通过justify-content.
(4),Flex项目也可以移到左边，右边，水平垂直居中
都要通过align-items或justify-content实现
(5),Flex项目实现自动伸缩
.bigItem{
flex:200;
}
.smallItem{
flex:100;
}
1 <style type="text/css"> 2 *{ 3 padding:0;margin:0; 4 } 5 6 7 .flexcontainer{ 8 border:1px solid #ccc; 9 margin:10px 10px; 10 padding-bottom:20px; 11 } 12 13 .flexcontainer{ 14 display: -webkit-flex; 15 display: flex; 16 -webkit-flex-direction: row; 17 flex-direction: column; 18 -webkit-justify-content: flex-start; 19 justify-content: flex-start; 20 } 21 22 23 24 .ss{ 25 width:100px; 26 height:120px; 27 background:#c90; 28 margin:10px; 29 } 30 31 32 style> 33 <div class="flexcontainer"> 34 <div class="ss">div> 35 <div class="ss">div> 36 <div class="ss">div> 37 div>