css3-多列布局

    css3-多列布局
 
Ａ：－－－－－－－－－－－
    浏览器确定何时结束一列和开始下一列。，自动将内容按照指定的列数排列。

Ｂ：－－－－－－－－－－－
    columns:     column-width + column-count ,实线元素多列布局效果
    column-width:    定义每列列宽度
    column-count:    分列行数
    column-gap:　    列间距
    column-rule:    列边框
    column-span:    多布布局中子元素跨列效果
    column-fill:    控制每列的列高效果


        分隔符出现属性：    有限数量的关键词作为值
            break-before    元素之前
            break-after    元素之后
            break-inside    内部存在
            （等同于　page-break-before. page-break-after. page-break-inside)    
            分隔符属性值：
                auto:         不强迫不禁止在生成框之前（之后，之间）分页
                always:        总是强迫在之前／之后／之间
                avoid:        避免在之前／之后／之间分页
                left:        强迫在生成框之前／之后分为一个／两个页，下一页为左页
                right:        强迫在生成框之前／之后分为一个／两个，下一页为右页
                    ++ css3 ++
                page:        总是强迫在之前／之后分页
                column:        总是强迫在之前／之后分列
                avoid-page:    总是避免在生成框之前／之后分页
                avoid-column:    总是避免在生成框之前／之后分列

Ｃ：－－－－－－－－－－－－－－
    columns: 符合属性＝　列宽＋列数
        columns: <column-width> || <column-count>
            column-width: 定义宽度
            column-count:　定义列数
Ｄ：－－－－－－－－－－－－－－
    column-width:    给列定义一个最小宽度
        column-width: auto | <length>
            auto: 多列的列宽将由其他属性决定（此时需要配合 column-count的其他属性才能有分列效果）
            length:　设置宽度，只能为正值

Ｅ：－－－－－－－－－－－－－－
    column-count:  指定想要的列数和允许的最大列数
        column-count: auto | <integer>
            auto: 默认值，表示元素只有一列。
            integer: 正整数值，定义列数，正数
                    事实根据元素列宽，间距等可以算出　：列数=(容器宽度-间距）　／　列间距

                        ！！１：column-count实际中只是去余取整。
                        　　２：元素显式设置了列数，不管元素容器宽度间距，总显示固定列数
Ｆ：－－－－－－－－－－－－－－
    column-gap: ～相邻两列之间的空白，设置列间距
        column-gap: normal | <length>
            normal: 默认，主要用于浏览器默认设置时候进行解析
            length: 由浮点数字和单位标识符组成的长度值。设置列与列之间的距离，常用px,em。　　　正数！

Ｇ：－－－－－－－－－－－－－－
    column-rule:　设置列边框。宽度，样式，颜色。（不占用任何空间位置）
        
        column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>
            
            column-rule-width: 默认medium，任何>=0的浮点数（ａｌｓｏ：　medium, thick, thin）
        
            column-rule-style: 边框样式。默认:none
                        none\hidden\dotted\dashed\solid\double\groove\ridge\inset\outset
            
            column-rule-color: 颜色。默认为前景色。不显示可以改为transparent

    (gap -- rule)
    1: gap具有空间位置，有可能撑破容器
    2:　rule没有空间位置，不会撑破容器，列宽度>列间距宽度的时候，列边框会自动消失

Ｈ：－－－－－－－－－－－－－－－

    column-span： 多列布局跨列显示，定义一个分列元素中的子元素能跨列多少
        
        column-span: none | all
            none: 不跨越列显示
            all:　　跨越所有列，并定位在列的Ｚ轴上面
    

Ｉ：－－－－－－－－－－－－－－
    column-fill:　定义多列中的每一列的高度是否统一
        
        column-fill: auto | balance
            
            auto:　默认，高度会随着内容的变化自动变化
            balance: 各列的高度会根据内容最多的一列的高度进行统一