直接调用window.print()会打印错乱，因浏览器未将打印视为独立渲染通道；必须用@media print隔离逻辑、@page控制纸张、break属性干预分页，三者平级且顺序不可颠倒。
为什么直接调用 window.print() 会打印出错乱内容
因为你没把打印当成独立渲染通道——浏览器默认按屏幕逻辑渲染，而纸张有物理尺寸、分页规则和墨水限制。所有屏幕样式（flex、position: fixed、背景图、rem字号）在打印中要么失效，要么被打印机驱动强制重置。
关键不是“隐藏什么”，而是“重写什么”。必须用 @media print 完全隔离逻辑，且它不能写在通用 CSS 文件末尾或分散在多个 <link> 中，否则会被前面的规则覆盖。
-
@media print必须作用于最终参与渲染的文档流，优先级要压过屏幕样式 - 外部样式表更可靠：
<link rel="stylesheet" media="print" href="print.css"> - 禁用
* { }这类宽泛选择器，容易破坏<table>的 display 行为 -
<iframe>内容不会继承父页的@media print，需提前提取或单独重置
怎样让表格跨页时表头自动重复、不被截断
HTML 表格在打印时 <thead> 默认不会重复出现在每页顶部，这是标准行为，不是 bug。同时，break-inside: avoid 对 <tr> 和 <td> 无效，强行加也没用。
- 显式声明：
thead { display: table-header-group; }（tfoot同理） - 整表防断裂：
table { page-break-inside: avoid; }（比break-inside兼容性更好） - 避免用
flex或grid包裹<table>，改用display: block; width: 100%; - 横向长表加：
@page { size: landscape; }，并确保容器max-width: none;，否则仍按 A4 纵向截断
如何控制分页位置又不产生空白页
break-inside: avoid 只对块级容器生效，且依赖父容器是 BFC；float、inline、absolute 元素上加它等于白写。而 page-break-before: always 直接加在复杂布局元素上也常失效。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥做法：在需要分页的位置插入空
<div>，设page-break-before: always; - 防止标题和段落被拆开：
h2 + p { break-inside: avoid; }（前提是两者都在块级容器内） -
@page必须平级声明，不能塞进@media print里，否则完全不生效 - 调试时临时加：
* { border: 1px solid red !important; }，看哪些元素撑出页面边界
字体、颜色、链接这些细节为什么打印出来就没了
不是浏览器 bug，是默认策略：禁背景图、转非黑文字为灰度、压缩字体粗细省墨。你没法靠“强制显示”对抗，只能主动适配。
- 正文字体栈用安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif; - 字号统一用
pt（如12pt），禁用em、%、px - 显式声明颜色：
color: #000 !important;，别信currentColor或变量 - 链接补 URL：
a[href]::after { content: " (" attr(href) ")"; } - 背景一律
background: transparent !important;，print-color-adjust: exact在 Firefox 不支持，Chrome 仅部分版本有效
真正麻烦的从来不是写多少样式，而是确认 @page、@media print、break- 属性三者是否平级存在、顺序正确、且没被更高优先级的通用样式覆盖。预览时多点几次“Ctrl+P”，比等真打出一张废纸强十倍。
