CSS 中的分页媒体

在本文中，我们将介绍 CSS 中的分页媒体。分页媒体是指在打印或者打印预览时，网页内容和样式如何分页显示的一种方法。通过使用分页媒体，我们可以更好地控制打印页面的布局、样式和排版。

阅读更多：CSS 教程

分页媒体属性

CSS 提供了一些属性来控制分页媒体的显示效果，包括 page-break-before、page-break-after 和 page-break-inside。这些属性可用于定义何时和如何分页显示元素。

page-break-before：定义在当前元素之前是否插入分页符。可以设置为 auto、always 或者 avoid。
page-break-after：定义在当前元素之后是否插入分页符。可以设置为 auto、always 或者 avoid。
page-break-inside：定义是否允许分页在当前元素内部发生。可以设置为 auto、avoid 或者 inherit。

以下是一个示例：

@media print {
  .page-break {
    page-break-after: always;
  }
}

上述代码将在打印或打印预览时，在具有 .page-break 类的元素之后插入分页符，确保该元素以及之后的内容显示在下一页。

分页媒体模块

CSS 还提供了一些关于分页媒体的模块，用于更详细地控制打印页面的布局和样式。这些模块包括：

页面尺寸 (@page)：用于定义页面的尺寸、边距和媒体类型。
页眉 (@top-left, @top-center, @top-right)：用于定义页眉内容和样式。
页脚 (@bottom-left, @bottom-center, @bottom-right)：用于定义页脚内容和样式。
标题 (@title)：用于定义页面的标题栏内容和样式。

以下是一个示例：

@page {
  size: A4;
  margin: 2cm;
}

@top-right {
  content: "Page " counter(page);
}

@bottom-center {
  content: "© 2022 Example Company. All rights reserved.";
}

上述代码将设置打印页面的尺寸为 A4，并在页面的右上角显示页码，页脚则显示公司版权信息。

分页媒体示例

下面是一个更复杂的示例，展示如何使用 CSS 控制打印页面的布局和样式：

@media print {
  @page {
    size: A4;
    margin: 2cm;
  }

  h1 {
    page-break-before: always;
  }

  p {
    font-size: 12pt;
    line-height: 1.5;
  }

  .image {
    page-break-inside: avoid;
  }

  .caption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    font-style: italic;
  }
}

上述代码将在打印页面时，设置页面尺寸为 A4，并设置页边距为 2cm。所有的一级标题 (<h1>) 都将显示在独立的一页上。段落 (<p>) 的字体大小为 12pt，行高为 1.5。图片元素 (.image) 内部不允许发生分页，确保图片完整地显示在一页上。图片的标题 (.caption) 显示在图片的底部，并居中显示，并且带有斜体样式。