columns网页布局

网页布局是指在网页中如何对标题、导航栏、主要内容、表单等各种构成要素进行一个合理的编排。

在css3前主要使用float和position属性进行页面布局，但是使用这些属性也存在着一些缺点。比如多栏中如果元素的内容高度不一致则底部很难对齐，会存在空白。

在css3中增加了一些新的布局方式。使用新的布局方式，可以更加快捷方便的来编排更为复杂的页面。css3中的Mulitiple Columns多列自动布局功能可以自动将内容按指定的数排列，这种特性适合报纸和杂志类纯文档的版式设计。

下面来具体介绍：

1、设计多列布局

columns是多列布局的基本属性，该属性可以同时定义列数和每列宽度。基本语法如下。

columns：<column-width>||<column-count>;

Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

<column-width>:定义每列的宽度。

<column-count>:定义列数。

[示例]

   代码如下：

 css部分：

 html部分：

                                                                              

2、设置多列显示样式

.  定义列宽

 column-width属性可以定义单列显示的宽度，该属性可以与其他多列布局属性配合使用，基本语法如下：

column-width:<length>|auto;

<length>:由浮点数字和单位标识符组成的长度值，不可为负值。

auto:根据浏览器计算值自动设置。

.定义列数

column-count属性可以定义显示的列数。基本语法如下：

column-count:<integer>|auto;

<integer>:定义栏目的列数，取值为大于0的整数，若column-width和column-count属性没有明确值，该取值为最大列数。

.定义列间距

column-gap属性可以定义两栏之间的间距。基本语法如下：

column-gap:<normal>|<length>;

<normal>:根据浏览器默设置进行解析，一般为1em。

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。

.定义列边样式

为列边框设计样式，能够有效的区分个栏目见的关系，阅读时较为清晰。column-rule属性了一定义每列之间边框的宽度、样式和颜色。基本语法如下：
column-rule:<length>|<style>|<color>|<transparent>

<length>:由浮点数字和单位标识符组成的长度值。不可为负值.功能与column-rule-width属性相同。

<color>:定义列边框的颜色。功能与column-rule-color属性相同。

<transparent>：设置边框透明显示。

css3在column-rule属性基础上派生了3个列边框属性。

column-rule-width:与<length>相同。

column-rule-color:与<color>相同。

column-rule-style:定义列边框样式。column-rule-style与border-style属性值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset。

.定义跨列显示

column-span：1|all

1:只在本栏显示。

all:将横跨所有栏，并定位在列的z轴之上。

.定义列高度

column-fill属性可以定义栏目的高度是否统一。基本语法如下：

column-fill:auto|balance;

auto:各列的高度随其内容的变化而变化。

balance：各列的高度将会根据内容最多的那一列的高度进行统一。

最后奉上效果图：

呼~完成！是不是简单又实用呢！