html5打印样式核心是@media print媒体查询，需隐藏非内容元素、重置浮动定位、统一文字背景，并用@page控制纸张属性，适配表格链接代码等，通过data-print属性精准标记可打印区域。
在 HTML5 中实现打印专用样式排版，核心是使用 @media print 媒体查询配合关键 CSS 规则，让浏览器在打印时自动切换到一套专为纸张优化的样式体系，而不是直接“截图”屏幕布局。
用 @media print 隐藏非内容元素并重置基础样式
所有打印样式必须包裹在独立的 @media print { } 块中，且该块不能嵌套在其他媒体查询或规则内。常见做法包括：
- 隐藏导航栏、侧边栏、广告、按钮等非正文内容：设置
.no-print, nav, aside, .print-btn { display: none !important; } - 强制清除浮动与定位干扰：添加
* { float: none !important; position: static !important; } - 统一文字与背景：
body { color: #000 !important; background-color: #fff !important; } - 禁用透明/半透明效果：避免
opacity或rgba()，它们在多数打印机上渲染异常
用 @page 控制物理纸张属性与分页留白
@page 必须与 @media print 平级书写，不能放在其内部。它定义的是真实纸张的尺寸、边距和首页特殊空间：
- 设定标准 A4 尺寸与边距：
@page { size: A4; margin: 15mm; } - 首页顶部加大留白（如加标题区）：
@page :first { margin-top: 25mm; } - 避免内容被裁切：确保
@page的margin大于打印机最小边距（通常 ≥10mm）
针对表格、链接、代码等常见内容做打印适配
这些元素在打印时最容易断裂、丢失或不可读，需显式处理：
- 表格不跨页断裂：
table { page-break-inside: avoid; }，同时声明thead { display: table-header-group; } - 显示链接地址：
a[href]:after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; } - 代码块用等宽字体：
pre, code { font-family: "Courier New", monospace; font-size: 10pt; } - 禁用 flex/grid 包裹表格容器，改用
display: block; width: 100% !important;
用 data-print="true" 精准标记可打印区域
比依赖通用 class 更可靠的方式是用自定义属性明确标识内容主体：
- 在 HTML 中标记：
<article data-print="true">...</article> - 配套打印样式：
@media print { * { display: none; } [data-print="true"] { display: block; } } - 若页面含
<iframe></iframe>，需在其内部单独写@media print，父页规则不会穿透生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
