页面盒模型：@page 规则中的边距框（Margin Boxes）与生成内容
大家好，今天我们来深入探讨 CSS 页面盒模型中一个经常被忽略但功能强大的部分：@page 规则中的边距框（Margin Boxes）以及如何利用它们生成内容。
在 Web 开发中，我们通常关注的是网页在浏览器中的呈现。但是，CSS 也为打印媒体提供了强大的支持。@page 规则允许我们控制打印页面的布局和外观，而边距框是 @page 规则的核心组件，让我们可以在页面的边缘区域添加和控制内容。
1. 页面盒模型回顾
在深入边距框之前，我们先简单回顾一下 CSS 盒模型。标准的 CSS 盒模型包括以下几个部分：
- Content（内容区域）： 用于显示实际内容，例如文本、图像等。
- Padding（内边距）： 内容区域周围的空白区域，位于内容区域和边框之间。
- Border（边框）： 围绕内边距和内容区域的线条。
- Margin（外边距）： 围绕边框的空白区域，用于与其他元素分隔。
@page 规则下的页面盒模型与此类似，但它是针对整个打印页面而言的。
2. @page 规则
@page 规则用于定义打印页面的样式。它允许我们设置页面大小、方向、边距等属性。@page 规则的基本语法如下：
@page {
/* 页面样式规则 */
}例如，我们可以设置页面大小为 A4，并设置边距：
@page {
size: A4;
margin: 1in; /* 所有边距都为 1 英寸 */
}我们也可以分别设置不同的边距：
@page {
size: A4;
margin-top: 1.5in;
margin-right: 1in;
margin-bottom: 1in;
margin-left: 1in;
}3. 边距框（Margin Boxes）
边距框是 @page 规则中用于在页边距区域添加内容的区域。CSS 提供了 16 个预定义的边距框，它们位于页面的四个角、四条边的中心以及四个角的中间。
这些边距框分别命名如下：
@top-left-corner@top-left@top-center@top-right@top-right-corner@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom
这些边距框可以用来放置页眉、页脚、页码、章节标题等信息。
4. 在边距框中生成内容
要将内容添加到边距框中，我们可以使用 content 属性。 content 属性可以接受文本、图像、计数器、字符串以及其他 CSS 函数。
例如，要在页面的底部中心位置添加页码，可以使用以下代码：
@page {
@bottom-center {
content: "Page " counter(page);
}
}在这个例子中，counter(page) 是一个 CSS 计数器函数，它返回当前页面的页码。 content 属性将 "Page " 字符串与页码连接起来，并将结果显示在底部中心边距框中。
5. 使用 string-set 和 element() 函数
CSS 提供了 string-set 和 element() 函数，它们允许我们从文档中的元素提取内容，并将其插入到边距框中。
string-set 函数用于将元素的内容存储到一个命名的字符串中。例如，我们可以将每个章节的标题存储到一个名为 "chapter-title" 的字符串中：
h1 {
string-set: chapter-title content();
}content() 函数返回元素的内容。在这个例子中，它返回 <h1> 元素的内容。
element() 函数用于将指定元素的副本插入到边距框中。这对于包含复杂 HTML 结构的内容非常有用。
然后，我们可以在边距框中使用 string() 函数来显示存储的字符串：
@page {
@top-right {
content: string(chapter-title);
}
}这会将当前章节的标题显示在页面的顶部右侧。
或者，我们可以使用 element()函数来复制一个元素到边距框。假设我们想把当前章节的标题完全复制到页眉，我们可以这么做：
h1 {
position: running(chapterTitle);
}
@page {
@top-center {
content: element(chapterTitle);
}
}在这个例子中，position: running(chapterTitle) 将 <h1> 元素标记为 "running element"。然后，element(chapterTitle) 将 <h1> 元素的副本插入到 @top-center 边距框中。
关键区别: string-set 提取的是文本内容，而 element() 复制的是整个元素，包括样式和子元素。
6. 计数器（Counters）
CSS 计数器允许我们跟踪文档中的特定元素，并将其计数显示在边距框中。
例如，我们可以创建一个名为 "chapter" 的计数器，并在每个 <h1> 元素上增加它：
body {
counter-reset: chapter; /* 初始化计数器 */
}
h1 {
counter-increment: chapter; /* 增加计数器 */
}然后，我们可以在边距框中使用 counter() 函数来显示章节计数：
@page {
@top-left {
content: "Chapter " counter(chapter);
}
}这会将 "Chapter " 字符串与当前章节的计数连接起来，并将结果显示在页面的顶部左侧。
我们还可以使用嵌套计数器来创建分层编号。例如，我们可以创建一个名为 "section" 的嵌套计数器，并在每个 <h2> 元素上增加它：
h2 {
counter-increment: section;
}然后，我们可以在边距框中使用 counters() 函数来显示章节和节计数：
@page {
@top-right {
content: counters(chapter, ".") " " counter(section);
}
}counters() 函数接受两个参数：计数器的名称和一个分隔符。在这个例子中，它返回章节计数和节计数，并用 "." 分隔它们。
7. 示例代码
下面是一个完整的示例，演示了如何使用边距框、string-set 和计数器来创建页眉和页脚：
<!DOCTYPE html>
<html>
<head>
<title>CSS Page Margins Example</title>
<style>
@page {
size: A4;
margin: 1in;
@top-left {
content: "Document Title";
}
@top-right {
content: string(chapter-title);
}
@bottom-center {
content: "Page " counter(page);
}
}
body {
counter-reset: chapter;
}
h1 {
counter-increment: chapter;
string-set: chapter-title content();
}
h2 {
counter-reset: section; /* 重置section计数器 */
counter-increment: section;
}
h2:before {
content: counter(chapter) "." counter(section) " ";
}
</style>
</head>
<body>
<h1>Chapter 1: Introduction</h1>
<h2>Section 1.1: Background</h2>
<h2>Section 1.2: Objectives</h2>
<h1>Chapter 2: Methodology</h1>
<h2>Section 2.1: Data Collection</h2>
<h2>Section 2.2: Analysis</h2>
</body>
</html>在这个例子中，页面的顶部左侧显示 "Document Title"，顶部右侧显示当前章节的标题，底部中心显示页码。 h2 元素的内容前面会自动加上章节和节的编号。
8. 浏览器兼容性
@page 规则和边距框的浏览器兼容性相对较好，但在一些老版本的浏览器中可能存在一些问题。 建议在使用这些特性时进行测试，以确保在目标浏览器中能够正常工作。 现代浏览器对 @page 规则的支持已经相当完善。
9. 边距框的尺寸和定位
边距框的尺寸和定位取决于 @page 规则中设置的边距。边距框占据的是页面边距所定义的空间。我们可以通过调整边距来控制边距框的大小。
例如，如果我们将页面的顶部边距设置为 2 英寸，那么 @top-left、@top-center 和 @top-right 边距框的高度也将为 2 英寸。
10. 更高级的用法
除了文本和计数器之外，我们还可以在边距框中使用图像、渐变和其他 CSS 属性。 这允许我们创建更复杂和自定义的页眉和页脚。
例如，我们可以使用以下代码在页面的底部中心位置添加一个公司徽标：
@page {
@bottom-center {
content: url("logo.png");
}
}我们还可以使用 CSS 渐变来创建背景效果：
@page {
@top-center {
background: linear-gradient(to right, #f00, #00f);
}
}11. 调试技巧
在开发使用边距框的 CSS 时，可能会遇到一些问题。 以下是一些调试技巧：
- 使用打印预览： 使用浏览器的打印预览功能来查看页面的实际打印效果。
- 检查 CSS 语法： 确保 CSS 语法正确，特别是
@page规则和边距框的选择器。 - 使用开发者工具： 一些浏览器的开发者工具允许你检查
@page规则和边距框的属性。 - 简化问题： 如果遇到问题，尝试将代码简化到最小可重现的示例，以便更容易地找到问题所在。
12. 总结
边距框是 @page 规则中一个非常有用的特性，允许我们在打印页面的边缘区域添加和控制内容。通过结合 content 属性、计数器、string-set 和 element() 函数，我们可以创建自定义的页眉、页脚和其他页面元素，从而改善打印文档的整体外观和可用性。掌握这些技巧能显著提升你在打印样式方面的控制力。
更多IT精英技术系列讲座，到智猿学院