18、使用 CSS 优化网页打印效果

使用 CSS 优化网页打印效果

1. 网页打印的问题与 CSS 的作用

在日常浏览网页时，当我们尝试打印网页内容，可能会遇到各种糟糕的情况，比如文本溢出页面左侧等。这是因为网页最初是作为浏览媒介设计的。不过，如今借助 CSS，网页开发者可以更好地控制网页的打印效果。虽然目前 CSS 对打印媒体的支持还不够完善，但随着浏览器版本的不断更新，这种支持在逐渐增强。

2. 页面盒模型

2.1 基本概念

如果你使用过像 Quark XPress、InDesign 或 PageMaker 这样的桌面出版软件，应该对页面盒的概念比较熟悉。在这个盒子里，可以容纳页面上的所有元素。即使没有使用过桌面出版软件，在文字处理软件中也能看到类似网页页面盒模型的雏形。

CSS 页面盒模型基于 CSS 盒模型，主要包含两个主要区域：
- 页面区域 ：包含页面的所有元素。
- 边距区域 ：围绕页面区域，当指定页面区域大小时，会减去边距。

此外，该模型还进一步扩展，以处理浏览器代表的连续媒体和由离散特定页面实体组成的分页媒体之间的差异，这通过视觉格式化模型来实现，它可以将浏览器中的连续媒体转换为实际的纸张、透明胶片甚至胶片。

2.2 页面盒模型图示

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    A(页面边缘<br> = 边