极客教程CSS 的Page分页
在网页开发中，经常会遇到需要对内容进行分页显示的情况。CSS的@page规则可以帮助我们控制打印页面的样式，包括分页、页眉、页脚等。在本文中，我们将详细介绍如何使用CSS的@page规则来实现页面分页效果。
1. 基本用法
首先，我们来看一个基本的示例，如何使用@page规则来定义打印页面的样式：
@page {
size: A4;
margin: 1cm;
}
在上面的示例中，我们定义了打印页面的尺寸为A4，页边距为1cm。接下来，我们可以在页面中应用这个样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
size: A4;
margin: 1cm;
}
</style>
</head>
<body>
<div class="content">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<!-- 这里省略部分内容 -->
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们定义了打印页面的样式为A4尺寸，页边距为1cm。在页面中的.content元素中，我们放置了一些内容，这些内容将会被分页显示。
2. 分页控制
有时候，我们需要手动控制页面的分页，可以使用page-break-before和page-break-after属性来实现：
.page-break {
page-break-before: always;
}
在上面的示例中，我们定义了一个.page-break类，当这个类应用到元素上时，会在该元素之前插入一个分页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
size: A4;
margin: 1cm;
}
.page-break {
page-break-before: always;
}
</style>
</head>
<body>
<div class="content">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<div class="page-break"></div>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们在.content中插入了一个.page-break元素，这个元素会在第一页的末尾插入一个分页，从而实现手动控制分页的效果。
3. 页眉和页脚
除了控制页面的分页，我们还可以使用@page规则来定义打印页面的页眉和页脚：
@page {
size: A4;
margin: 1cm;
@top-center {
content: "页眉";
}
@bottom-center {
content: "页脚";
}
}
在上面的示例中，我们使用@top-center和@bottom-center来定义页面的页眉和页脚内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
size: A4;
margin: 1cm;
@top-center {
content: "页眉";
}
@bottom-center {
content: "页脚";
}
}
</style>
</head>
<body>
<div class="content">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<div class="page-break"></div>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们定义了页面的页眉为”页眉”，页脚为”页脚”，这些内容会显示在每一页的顶部和底部。
4. 分页符样式
我们还可以使用page-break-inside属性来控制元素内部的分页效果：
.page-break-inside {
page-break-inside: avoid;
}
在上面的示例中，我们定义了一个.page-break-inside类，当这个类应用到元素上时，会避免在该元素内部发生分页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
size: A4;
margin: 1cm;
@top-center {
content: "页眉";
}
@bottom-center {
content: "页脚";
}
}
.page-break-inside {
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="content">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<div class="page-break"></div>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<div class="page-break-inside">
<p>这是一个避免分页的元素。</p>
<p>这是一个避免分页的元素。</p>
<p>这是一个避免分页的元素。</p>
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们在一个.page-break-inside元素内部放置了一些内容，这个元素会避免发生分页，从而保证这些内容在同一页显示。
5. 打印样式
有时候，我们需要为打印页面单独定义样式，可以使用@media print媒体查询来实现：
@media print {
body {
background-color: #fff;
}
}
在上面的示例中，我们定义了一个@media print媒体查询，当页面打印时，页面的背景色会变为白色。
6. 打印页面样式调整
除了背景色，我们还可以通过@media print媒体查询来调整打印页面的样式，比如隐藏某些元素、调整字体大小等：
@media print {
.no-print {
display: none;
}
p {
font-size: 12pt;
}
}
在上面的示例中，我们定义了一个.no-print类，当页面打印时，这个类应用的元素会被隐藏。同时，我们还调整了打印页面中<p>元素的字体大小为12pt。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
size: A4;
margin: 1cm;
@top-center {
content: "页眉";
}
@bottom-center {
content: "页脚";
}
}
.page-break-inside {
page-break-inside: avoid;
}
@media print {
.no-print {
display: none;
}
p {
font-size: 12pt;
}
}
</style>
</head>
<body>
<div class="content">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<div class="page-break"></div>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<div class="page-break-inside">
<p>这是一个避免分页的元素。</p>
<p>这是一个避免分页的元素。</p>
<p>这是一个避免分页的元素。</p>
</div>
<div class="no-print">
<p>这个元素不会打印出来。</p>
</div>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们在页面中添加了一个.no-print类的元素，这个元素在打印时会被隐藏，不会显示在打印页面中。
7. 分页符样式调整
有时候，我们需要调整分页符的样式，可以使用page-break-before和page-break-after属性来实现：
.page-break-before {
page-break-before: always;
}
.page-break-after {
page-break-after: always;
}
在上面的示例中，我们定义了.page-break-before和.page-break-after类，分别在元素之前和之后插入分页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
size: A4;
margin: 1cm;
@top-center {
content: "页眉";
}
@bottom-center {
content: "页脚";
}
}
.page-break-inside {
page-break-inside: avoid;
}
.page-break-before {
page-break-before: always;
}
.page-break-after {
page-break-after: always;
}
</style>
</head>
<body>
<div class="content">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<div class="page-break-before"></div>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<p>这是第二页的内容。</p>
<div class="page-break-after"></div>
<p>这是第三页的内容。</p>
<p>这是第三页的内容。</p>
<p>这是第三页的内容。</p>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们分别在第一页和第二页的内容之前和之后插入了分页符，从而实现了分页的效果。
8. 多列分页
有时候，我们需要将内容分成多列显示，并在每列之间进行分页，可以使用column-count属性来实现：
.multi-column {
column-count: 2;
}
在上面的示例中，我们定义了一个.multi-column类，将内容分成两列显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
size: A4;
margin: 1cm;
@top-center {
content: "页眉";
}
@bottom-center {
content: "页脚";
}
}
.page-break-inside {
page-break-inside: avoid;
}
.multi-column {
column-count: 2;
}
</style>
</head>
<body>
<div class="content multi-column">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们将内容分成两列显示，当内容超过一页时，会在两列之间进行分页。
9. 打印页面背景
有时候，我们需要在打印页面中显示背景图片或颜色，可以使用background属性来实现：
@media print {
body {
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
}
}
在上面的示例中，我们在打印页面中显示了一个背景图片，并设置了背景图片的样式。
10. 打印页面页眉和页脚
我们可以使用@page规则来定义打印页面的页眉和页脚内容，例如：
@page {
@top-center {
content: "页眉内容";
}
@bottom-center {
content: "页脚内容";
}
}
在上面的示例中，我们定义了打印页面的页眉内容为”页眉内容”，页脚内容为”页脚内容”，并分别居中显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 分页示例</title>
<style>
@page {
@top-center {
content: "页眉";
}
@bottom-center {
content: "页脚";
}
}
</style>
</head>
<body>
<div class="content">
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
<p>这是第一页的内容。</p>
</div>
</body>
</html>
代码运行结果:
在上面的示例中，我们定义了打印页面的页眉为”页眉”，页脚为”页脚”，并在页面中显示。