本篇主要讲布局相关的样式。
1、多栏布局。
在css3之前，若要实现分栏的效果，可以使用浮动（float）来实现。但是这样会有一个缺点就是，分栏时造成分栏的几个栏不能对齐。
而在CSS3中，可以通过column-count属性来进行多栏布局，这个属性的含义是将一个元素中的内容分成多栏进行显示。
使用方法： column-count: 栏目数;
兼容性写法：
-webkit-column-count:3; /*chrome和safari*/
-moz-column-count:3; /*火狐浏览器*/
-o-column-count:3;/*欧朋浏览器*/
-ms-column-count:3; /* IE 9 */
需要注意的是，在使用多栏布局的时候，要将元素的宽度设置成多个栏目的总宽度。
1.1 column-width属性：指定栏目的宽度来生成分栏。
兼容性写法： -webkit-column-width、-moz-column-width。
1.2 column-gap属性：指定栏目与栏目之间的距离。
兼容性写法： -webkit-column-gap、-moz-column-gap。
1.3 column-rule属性：栏目与栏目之间增加一条分割线。
兼容性写法： -webkit-column-rule、-moz-column-rule。
2、盒布局
在css3中，可以使用box属性来使用盒布局，是的多栏底部对其，如火狐中使用-moz-box，否则需要使用float来指定。
3、弹性盒布局
在css3中只要我们使用一个box-flex属性，就可以使得我们的盒布局变成弹性盒布局了，它可以让div的宽度随着浏览器窗口的变化而变化。其兼容性写法：
-webkit-box-flex (Safari浏览器、chrome浏览器)
-moz-box-flex(火狐浏览器)
改变元素的显示顺序；在使用弹性盒布局时，可以使用box-ordinal-group属性改变各个元素的显示顺序，在每个元素中加入box-ordinal-group属性，该属性使用一个表示序号的正数属性值，浏览器的显示的时候根据序号从小到大来显示这些元素。其兼容性写法：
-webkit-box-ordinal-group
-moz-box-ordinal-group
还可以改变元素的排列方向；在使用弹性盒布局时，可以使用box-orient来指定多个元素的排列方向。其兼容性写法：
-webkit-box-orient：horizontal
-moz-box-orient:vertical