布局相关样式

多栏布局

1.column-count属性

在CSS3中可以通过，column-count属性来进行多栏布局，这个属性的含义是将一个元素中的内容分成多栏进行显示。

写法：

column-count：栏目数；

兼容性写法：

-webkit-column-count：3；           

-moz-column-count：3

需要注意的是，在使用多栏布局的时候，要将元素的宽度设置成多个栏目的总宽度。

2.column-width属性：指定栏目的宽度来生成分栏

兼容性写法：-webkit-column-width、-moz-column-width

3.column-gap属性：指定栏目与栏目之间的距离

兼容性写法：-webkit-column-gap、-moz-column-gap

4.column-rule属性：栏目与栏目之间增加一条分割线

兼容性写法：-webkit-column-rule、-moz-column-rule

盒布局

1.使用float属性和position属性时的缺点

在CSS3中，除了多栏布局之外，还可以使用盒布局来解决使用float属性和position属性时多栏底部不能对齐的缺点。

2.使用盒布局

在CSS3中，使用box属性来使用盒布局，如“-moz-box”（火狐）、“-webkit-box”（谷歌）

3.盒布局与多栏布局的区别

多栏布局的栏目宽度必须相等，指定栏目的宽度有时也只能统一指定，栏目的宽度不可能全都一样，所以多栏布局比较适合在文字内容页面使用，并不适合整个页面编排时使用。

 弹性盒布局

1.使用自适应窗口的弹性盒布局

 如何才能让DIV的宽度跟随浏览器窗口变化而变化？在CSS3中我们只要使用一个box-flex属性，使得我们的盒布局变成弹性盒布局就可以了。

兼容性写法：

-webkit-box-flex（Sanfari浏览器、Chrome浏览器时前面加-webkit-）

-moz-box-flex（Firefox浏览器时前面加-moz-）

2.改变元素的显示顺序

使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各个元素的显示顺序，在每个元素中加入box-ordinal-group属性，这个属性使用一个标识序号的正数属性值，浏览器在显示的时候根据序号的从小到大来显示这些元素。

兼容性写法：

-webkit-box-ordinal-group（Sanfari浏览器、Chrome浏览器时前面加-webkit-）

-moz-box-ordinal-group（Firefox浏览器时前面加-moz-）

3.改变元素的排列方向

在使用弹性盒布局的时候，可以通过box-orient来指定多个元素的排列方向

值：horizontal在水平行中从左向右排列子元素/vertical从上向下垂直排列子元素

兼容性写法：

-webkit-box-orient:vertical（Sanfari浏览器、Chrome浏览器时前面加-webkit-）

-moz-box-orient:vertical（Firefox浏览器时前面加-moz-）

4.元素的宽度与高度自适应

在使用盒布局的时候，元素的宽度与高度具有自适应性，就是元素的宽度与高度可以根据排列方向的改变而改变

5.使用弹性盒布局来消除空白

方法：给子DIV中加入一个box-flex属性

6.对多个元素使用box-flex属性

让浏览器或者容器的元素总宽度或者是总高度都等于浏览器或者容器的高度

方法对多个元素使用box-flex属性

7.指定水平方向与垂直方向的对齐方式

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中的文字、图像以及子元素的水平方向或者是垂直方向上的对齐方式

兼容性写法：

-webkit-box-pack:值（Sanfari浏览器、Chrome浏览器时前面加-webkit-）

-moz-box-pack:值（Firefox浏览器时前面加-moz-）