CSS3多列布局

1. columns属性是一个复合属性——列宽（column-width）和列数（column-count），可以同时定义多列的列数和每列的列宽。
   columns: ||

• ：定义多列种每列的宽度。
• ：定义多列中的列数。

2. column-width属性类似于给列定义一个最小宽度（min-width）。
   column-width: auto |

• auto：默认值，如果值为auto或者没有显示设置值时，元素多列的列宽将有其他属性来决定。
• ：使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能时正值，不能为负值。
  column-width单独使用时，当容器超出列宽时，会以多列显示，反之容器宽度小与设置的列宽时，容器将只显示为一列。

3. column-count属性主要用来给元素指定想要的列数和允许的最大列数。
   column-count: auto |

• auto：默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。
• ：正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。
  列数=（容器宽度-间距）/列间距
  浏览器对所求列数的值是去余取整，且如果元素设置了列数，不管元素容器的宽度是多少或者间距多少，总是显示固定的列数。

4. column-gap属性类似于盒模型中的margin一样，主要用来设置元素分列的列间距，其只能设置列与列之间的间距。
   column-gap: normal |

• normal：默认值，主要通过浏览器默认设置时行解析，一般情况下，normal值相当于1em。
• ：由浮点数字和单位标识符组成的长度值，主要用来设置列与列之间的距离，常用px、em单位的任何整数值，其值不能为负值。
  column-gap可以用来改变相邻列之间距离，但在多列元素同时设置了column-width时，column-gap与column-width等参数之和大于多列元素总宽度时，会导致列被撑破，并将以当前列数减1的列数显示，此时列宽自动调节到适当的列宽。

5. column-rule属性主要是用来定义列与列之间的边框宽度、边框样式和边框颜色，有些类似于常用的border属性，但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
   column-rule: | |

• column-rule-width：类似于border-width属性，主要用来定义列边框的宽度，其默认值为medium，该属性接受任意浮点数，但不接受负值。像border-width属性一样，可以使用款见此medium、thick和thin。
• column-rule-style：此值类似于border-style属性，主要用来定义列边框样式，其默认值为none。该属性值与border-style属性值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
• column-rule-color：此值类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。该属性接受所有的颜色。如果不希望显示颜色，也可以将其值设置为transparent（透明色）。
  column-rule-width增大并不会影响列的布局，其不占有任何空间位置。
  column-rule在Z轴上是介于background和content之间，当column-rule-width宽度增加到超过列与列的间距时，列边框就会自动消失。

6. column-span属性主要用来定义一个分列元素中的子元素能跨多少列，有时需要一段内容或一个标题不进行分列，也就是横跨所有列，就可以用该属性实现。
   column-span: none | all

• none：默认值，表示不跨越任何列。
• all：跟none值正好相反，表示的是跨越所有列，并定位在列的Z轴之上。

7. column-fill属性主要用来定义多列种每一列的高度是否统一。
   column-fill: auto | balance

• auto：默认值，各列的高度随其内容的变化自动变化。
• balance：各列的高度将会根据内容最多的一列的高度进行统一。