【无标题】

1、多列布局

1、元素被分隔的列数——column-count属性

• column-count: n; 元素内容被划分的列数，没有单位

2、列的宽度——column-width属性

• column-width: npx; 分列之后每一列的宽度

3、列间距——column-gap属性

• column-gap: npx; 两列之间的间隔为npx

• column-gap: normal; 两列之间间隔为常规间隔，W3C建议值为1em

4、列与列之间的分割线——column-rule属性

• 语法

column-rule: column-rule-width  column-rule-style  column-rule-color;
    column-rule-width属性：分割线宽度
    column-rule-style属性：分割线线型（solid  double  dotted  dashed）
    column-rule-color属性：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)

 .box {
            width: 800px;
            border: 2px solid red;
            margin: 50px auto;
            /* 元素被分隔的列数 */
            /* column-count: 3; */
            /* 列的宽度  会自动计算列数*/
            column-width: 30px;
            /* 列间距 */
            column-gap: 20px;
            /* 列与列之间的分割线  */
            column-rule: 20px dotted orange;
        }