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精準