Css3布局

1、多列布局：

columns：<column-width> || <column-count>  列宽和栏数
要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

2、column-width : 列宽

3、column-count:分栏

4、column-gap:用来设置列与列之间的间距。

column-gap: normal || <length>

column-gap: 2em; //列间距设为2em

5、column-rule 列表边框 定义边框宽度，边框样式，边框颜色

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

column-rule: 2px dotted green;

 -webkit-column-rule:3px solid #ccc;
  -moz-column-rule:3px solid #ccc;
  -o-column-rule:3px solid #ccc;
  -ms-column-rule:3px solid #ccc;
  column-rule:3px solid #ccc;

6、跨列设置  column-span 

    主要用来定义一个分列元素中的子元素能跨列多少

column-span:none | all

none:不跨越任何列

all : 这个值跟none值刚好相反，表示元素跨越所有列，并定位在列的Z轴之上。

让所有偶数段落和标题，跨越所有列
h2,
p:nth-child(2n){
  -webkit-column-span:all;
  -moz-column-span:all;
  -o-column-span:all;
  -ms-column-span:all;
  column-span:all;
}

7、盒模型  

    box-sizing: 能够事先定义盒模型的尺寸解析方式。

box-sizing: content-box | border-box | inherit