css3的多列布局（columns）

多列布局：可以实现web页面像报纸、杂志那样的布局

1. column-count：number；设置列数

2. column-gap：50px | 2em；设置列之间的间隙

3. column-rule：设置列之间的分隔线

复合属性：column-rule-width、column-rule-style、column-rule-color

注意：该线浮在column之上，比内容的层级高。

4. column-span：1 | all，作用在h标签上，设置标题占一列或者占整列

    <style>
        div{
            width: 400px;
            height: 600px;
            border: 1px solid black;
            column-count: 2;
            column-gap: 50px;
            column-rule: 4px solid red;
        }
        h2{
            column-span: 1;
        }
    </style>

注意：column-count、column-gap、column-rule都是父级属性，即盒子的属性；而column-span是作用在h标签的属性。

列宽的计算：column-width：(width-(n-1)*font-size)/n；n是：列数

当n >= 2时，自己设置的column-width值 大于 公式值，那么列数减一

注意：column-count要比column-width精准