CSS3基础 -- 多列布局

多列布局

多列布局作用

• 多列布局是CSS3实现的用来解决多列布局的布局方式。

多列布局常用的5个属性

column-count

• column-count用来指定多列布局的列数。

  • column-count属性的2种属性值

    • auto（默认值）

      • 列数由column-width属性决定。

    • n（正整数）

      • 自动划分为n列。

column-width

• column-width属性用来指定多列布局中每一列的宽度。

  • column-width属性的2种属性值

    • auto（默认值）

      • 由column-count属性决定。

    • 长度值

      • 单位可以是px、em、百分比。

column-gap

• column-gap属性用来定义多列布局中的列与列之间的间距。

  • column-gap属性有2个属性值

    • normal

      • 浏览器默认值。

    • 长度值

      • 单位可以是px、em、百分比。

column-rule

• column-rule属性用来定义多列布局中的列与列之间的边框样式。

  • column-rule: width style color;

    • column-rule属性和border属性一样。

column-span

• column-span属性用来实现多列布局中的跨列效果。

  • column-span属性取值有2种

    • none

      • 不跨列。

    • all

      • 跨所有列。

XMind: ZEN - Trial Version