在开发后台管理系统、报表平台或电商订单页时，经常需要把网页内容输出到纸张。浏览器自带的打印功能会直接渲染屏幕样式，结果往往出现导航栏占位、背景色消失或表格被截断等问题。使用CSS的打印相关特性，可以在不改动页面结构的前提下，为打印场景单独定义样式与分页逻辑。
一、使用@media print媒体查询隔离打印样式
CSS提供了@media print规则，当文档被发送到打印机或打印预览时，该规则块内的样式会覆盖屏幕样式。这样我们就能隐藏网页中只服务于交互的模块，例如顶部导航、侧边广告和悬浮按钮，让纸张只承载核心内容。
下面是一个基础示例，在屏幕上显示工具栏，打印时将其隐藏，同时把正文宽度设为百分之百：
/* 屏幕下默认样式 */
.toolbar {
display: block;
background: #f0f0f0;
}
/* 打印时生效 */
@media print {
.toolbar {
display: none;
}
.content {
width: 100%;
margin: 0;
font-size: 12pt;
}
}
这种写法的优势在于维护成本低，不需要为打印单独生成页面。缺点是如果打印规则较多，样式文件会变大。建议将打印专用样式抽成独立文件，通过link标签的media属性加载，例如<link rel="stylesheet" href="print.css" media="print">，这样屏幕浏览时浏览器不会解析它。
二、控制打印分页与避免内容截断
长表格或卡片列表在打印时经常被分页符切开，导致表头丢失或数据行断裂。CSS的page-break-before、page-break-after和page-break-inside属性能精确干预分页行为。其中page-break-inside: avoid可禁止元素内部跨页，适合用于发票区块或图表容器。
以下代码让每个订单卡片保持完整，不在卡片中间分页，并在每个一级标题前强制换页：
@media print {
h1 {
page-break-before: always;
}
.order-card {
page-break-inside: avoid;
border: 1px solid #ccc;
padding: 8px;
margin-bottom: 12px;
}
table tr {
page-break-inside: avoid;
}
}
在新标准中，上述属性已有对应的break-inside、break-before写法，但旧版打印机驱动对page-break-*支持更稳。实际项目中可同时声明两组属性做兼容。要注意，分页属性只对块级元素生效，且不能作用于绝对定位元素，否则会被浏览器忽略。
三、纸张尺寸、边距与背景色保留
通过@page规则可以设定打印纸张的大小和页边距，也能指定首页或偶数页的不同边距。默认A4纸在CSS中写作size: A4。若希望报表四周留白更小，可用毫米单位精确控制。
示例代码如下，同时用print-color-adjust保证关键状态标签的红色背景能被打印出来，而不是被打印机省墨策略去掉：
@page {
size: A4;
margin: 10mm 12mm;
}
@media print {
.status-tag {
background: #d9534f !important;
color: #fff !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
很多浏览器出于节能考虑，打印时会去掉所有背景色。仅靠background声明不够，必须加print-color-adjust: exact并配合!important提升优先级。边距设置则要注意，某些浏览器自带页眉页脚会占用边距空间，可将margin设得稍大以免正文被系统日期覆盖。
四、打印前动态注入样式与调试技巧
在单页应用里，路由切换后DOM更新，但打印样式若写在全局CSS中仍可生效。若需要根据数据动态隐藏某列，可通过JS在打印前给
加类，打印后移除：
function printOrder() {
document.body.classList.add('print-mode');
window.print();
document.body.classList.remove('print-mode');
}
对应的CSS只在body.print-mode下隐藏备注列：
@media print {
body.print-mode .remark-col {
display: none;
}
}
调试时无需频繁调出系统打印框，Chrome开发者工具的渲染模拟器支持Emulate CSS media type: print，切换后页面会直接应用@media print样式，便于快速检查分页与隐藏逻辑。结合上述方法，就能用纯CSS加少量JS，把任意网页改造成适合纸质输出的干净文档。
CSS打印样式分页控制@media_print修改时间：2026-08-05 12:03:33