CSS新手入门笔记整理:CSS多列布局

列数:column-count

语法

column-count: 取值;

属性值

说明

auto

列数由column-width属性决定(默认值)

n(正整数)

自动划分为n列


列宽:column-width

语法

column-width: 取值;

属性值

说明

auto

列数由column-count属性决定(默认值)

长度值

单位可以为px、em和百分比等

body会自动根据容器宽度、每列宽度、内容多少这三者来计算列数。


列间距:column-gap

语法

column-gap: 取值;

属性值

说明

normal

浏览器默认长度值

长度值

单位可以为px、em和百分比等


分隔线:column-rule

语法

column-rule: width style color;
  • column-rule-width:定义分隔线的宽度。
  • column-rule-style:定义分隔线的样式。
  • column-rule-color:定义分隔线的颜色。

跨列:column-span

语法

column-span: 取值;

属性值

说明

none

不跨列

all

跨所有列(跟none相反)


你可能感兴趣的:(css,前端)