第七章运用特殊效果

1. CSS3多列布局

什么是多列布局

1. 多列布局可以用来实现报纸、杂志、博客等需要分栏显示的内容，同时也能适应不同的屏幕大小和设备类型。在CSS3中，多列布局通过列数、列宽、间距等属性来控制不同列之间的排版关系，可以实现从两列到多列的任意排版。

认识Columns多列布局

1. CSS3的Columns多列布局用于将内容分割成多个列，比如报纸、杂志、博客等需要分栏显示的内容。以下是Columns多列布局的用法：

     1.设置列数：使用 "column-count" 属性来设置需要的列数。

div {
  column-count: 2; /* 两列布局 */
}

      2.设置列宽：使用 "column-width" 属性来设置每一列的宽度。

div {
  column-width: 150px; /* 每个列宽度为 150px */
}

        3.设置列间距：使用 "column-gap" 属性来设置列与列之间的间距。

div {
  column-gap: 20px; /* 列间距为 20px */
}

         4.设置列的宽度和列数的自适应：使用 "column-width" 属性和 "column-count" 属性可以同时设置，自动调整列宽和列数。

div {
  column-width: 150px; /* 列宽度 */
  column-count: auto; /* 自适应列数 */
}

  5.设置分页：使用 "page-break-inside" 属性来设置是否允许在列内分页。

div {
  column-count: 3;
  page-break-inside: avoid; /* 列内不允许分页 */
}

以上是Columns多列布局的基本用法，可以通过这些属性和值来自定义布局的效果。需要注意的是，Columns多列布局需要将要分列的内容放置在容器元素中，且容器元素需要设置为display: flex或display: inline-block等块级元素。

Columns的其他属性

column-fill：用于设置列的填充方式，有两个可选值：auto和balance。auto表示内容将填满所有列，不足的部分将留在最后一列。balance表示尝试让所有列的高度相等。

.container {
  column-fill: balance;
}
 

column-rule：用于设置列之间的分隔线样式。可以设置线宽、线型、颜色等属性。

.container {
  column-rule: 1px solid red;
}
 

column-span：用于设置元素是否跨列。默认值为none，表示不跨列。如果设置为all，则元素将跨越所有列。

.container p {
  column-span: all;
}
 

column-break-before和column-break-after：用于控制分列时元素与列之间的断点位置。可以设置断点类型，如page