多列

CSS3 可以将文本内容设计成像报纸一样的多列布局

创建多列

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

xxxxxxxxxx
div {
    column-count: 3;
}

列与列之间的间隙

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

xxxxxxxxxx
div {
    column-gap: 40px;
}

列边框

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

xxxxxxxxxx
div {
    column-rule-style: solid;
}

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

xxxxxxxxxx
div {
    column-rule-width: 1px;
}

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

xxxxxxxxxx
div {
    column-rule-color: lightblue;
}

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

xxxxxxxxxx
div {
    column-rule: 1px solid lightblue;
}

实时效果反馈

1.下列哪个属性可以设置多列列数：

A column-count

B column-rule-color

C column-rule

D column-gap

答案

1=>A

实操

1. 【实操】将一个100*100的盒子，变成圆形
2. 【实操】实现100*100的盒子的阴影效果，阴影值自拟
3. 【简答】什么是响应式布局，有哪些优缺点
4. 【实操】绘制一个向上的三角形