关闭

css3-多列布局

标签: css3
82人阅读 评论(0) 收藏 举报
    css3-多列布局
 
A:-----------
    浏览器确定何时结束一列和开始下一列。,自动将内容按照指定的列数排列。

B:-----------
    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:    总是避免在生成框之前/之后分列

C:--------------
    columns: 符合属性= 列宽+列数
        columns: <column-width> || <column-count>
            column-width: 定义宽度
            column-count: 定义列数
D:--------------
    column-width:    给列定义一个最小宽度
        column-width: auto | <length>
            auto: 多列的列宽将由其他属性决定(此时需要配合 column-count的其他属性才能有分列效果)
            length: 设置宽度,只能为正值

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

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

G:--------------
    column-rule: 设置列边框。宽度,样式,颜色。(不占用任何空间位置)
        
        column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>
            
            column-rule-width: 默认medium,任何>=0的浮点数(also: 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没有空间位置,不会撑破容器,列宽度>列间距宽度的时候,列边框会自动消失

H:---------------

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6157次
    • 积分:330
    • 等级:
    • 排名:千里之外
    • 原创:28篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条