• CSS3-多列(column-count等)


    CSS3 多列属性

    属性描述
    column-count 指定元素应该被分割的列数。
    column-fill 指定如何填充列
    column-gap 指定列与列之间的间隙
    column-rule 所有 column-rule-* 属性的简写
    column-rule-color 指定两列间边框的颜色
    column-rule-style 指定两列间边框的样式
    column-rule-width 指定两列间边框的厚度
    column-span 指定元素要跨越多少列
    column-width 指定列的宽度
    columns 设置 column-width 和 column-count 的简写

    创建多列:column-count

    column-count 属性指定了需要分割的列数。

    语法:column-count: number|auto;

    说明
    number 列的最佳数目将其中的元素的内容无法流出
    auto 列数将取决于其他属性,例如:"column-width"

    填充列:column-fill

    column-fill属性指定如何填充列。

    语法:column-fill: balance|auto;

    说明
    balance 列长短平衡。浏览器应尽量减少改变列的长度
    auto 列顺序填充,他们将有不同的长度

    多列中列与列间的间隙:column-gap

    column-gap 属性指定了列与列间的间隙。

    语法:column-gap: length|normal;

    描述
    length 一个指定的长度,将设置列之间的差距
    normal 指定一个列之间的普通差距。 

    列边框:column-rule-

    column-rule-style 属性指定了列与列间的边框样式:

    语法:column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

    描述
    none 定义没有规则。
    hidden 定义隐藏规则。
    dotted 定义点状规则。
    dashed 定义虚线规则。
    solid 定义实线规则。
    double 定义双线规则。
    groove 定义 3D grooved 规则。该效果取决于宽度和颜色值。
    ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值。
    inset 定义 3D inset 规则。该效果取决于宽度和颜色值。
    outset 定义 3D outset 规则。该效果取决于宽度和颜色值。

    column-rule-width 属性指定了两列的边框厚度

    语法:column-rule- thin|medium|thick|length;

    说明
    thin 指定一个细边框的规则
    medium 定义一个中等边框规则
    thick 指定一个粗边框的规则
    length 指定宽度的规则

    column-rule-color 属性指定了两列的边框颜色

    语法:column-rule-color: color;

    column-rule 属性是 column-rule-* 所有属性的简写。

    语法:column-rule: column-rule-width column-rule-style column-rule-color;

    指定元素跨越多少列:column-span

    语法:column-span: 1|all;

    描述
    1 元素应跨越一列
    all 该元素应该跨越所有列

    指定列的宽度:column-width

    column-width 属性指定了列的宽度。

    语法:column-width:auto|length

    描述
    auto 浏览器将决定列的宽度
    length 指定列宽的长度

    colums属性

    Columns属性是一个速记属性设置列宽和列数。

    语法:columns: column-width column-count;

  • 相关阅读:
    每日总结
    团队冲刺9
    团队冲刺8
    团队冲刺7
    团队冲刺6
    团队冲刺5
    团队冲刺4
    团对冲刺3
    团队冲刺2
    每日博客
  • 原文地址:https://www.cnblogs.com/lmjZone/p/8567573.html
Copyright © 2020-2023  润新知