使用 CSS 控制分页-猿码集

什么是分页

在网页中，为了方便用户阅读，常常需要将内容分为若干页进行展示。我们把将一个网页分为若干页的操作，称为分页。在分页中，常常需要用到CSS样式进行控制，以实现更好的用户体验。

在分页中，需要考虑用户的阅读体验，如果一篇文章被分成太多页面，会消耗用户的时间和精力，影响用户的阅读体验。为此，需要根据用户的阅读习惯和需求，合理地控制分页数目和分页方式。

在CSS中，我们可以使用page-break-before和page-break-after属性来控制分页。这两个属性用于控制元素在分页时的位置，实现让元素出现在新的一页或当前页的底部。

在使用page-break-before和page-break-after属性时，需要注意该属性只能作用于某些元素上，如<div>，，<table>等元素，而不能作用于<span>，<img>等元素。


/* 将<div>元素放在新的一页 */
div {
  page-break-after: always;
}
/* 将元素放在新的一页 */
p {
  page-break-before: always;
}

有时候，在一个元素内部也需要进行分页，而不是将整个元素放在新的一页上。此时，可以使用page-break-inside属性来控制元素内部的分页。

在<div>，<table>等元素中使用page-break-inside属性时，要注意该属性只对这些元素中的子元素有效，对元素本身无效。


/* 在<div>中进行分页 */
div {
  page-break-inside: avoid;
}

除了使用上述属性，还可以使用@page规则来控制分页。@page规则是定义打印文档时的页面规则和样式的关键，它常用于定义打印文档时的分页方式、页眉、页脚等等。

使用@page规则时，需要注意一下几点：

@page规则只能作用于根元素，即html元素。

@page规则中可以使用各种CSS属性，包括margin、padding、size等等。

@page规则中的样式也会影响正常显示的网页，所以应该使用@page的媒体查询，只在打印的情况下生效。

下面是一个@page规则的例子：


/* 定义打印文档的页眉、页脚，以及分页方式 */
@page {
  margin: 2cm;
  @top-center {
    content: "页眉";
  }
  @bottom-center {
    content: "页脚";
  }
}

分页是网页设计中重要的一环，通过使用CSS控制分页，我们可以实现更好的用户体验。在掌握了上述常用的分页控制属性之后，我们可以更加灵活地控制网页的分页方式，以满足用户的阅读需求。