@media print 可直接捕获打印上下文，无需JS或设备判断；规则须写入CSS文件或<style>块，避免内联遗漏media属性；Firefox预览最准，Chrome可能误合页边距；page-break-inside: avoid应加在<table>而非<tr>上；背景、边框、图片需!important强制打印；@page仅控纸张尺寸与页边距，不可嵌套选择器。
直接用 @media print 就能捕获打印上下文，不用判断设备或写 JS
浏览器只要进入打印预览（Ctrl+P / Cmd+P）或执行 window.print()，就会自动启用 @media print 规则——它和 @media screen 是平级的媒体类型，不是子集，也不依赖 UA 或 JS 检测。
常见错误是把 @media print 写在内联 <style> 里却漏了 media="print" 属性，或者误以为 DevTools 的“模拟媒体类型”能准确反映分页效果。实际上，那个开关只改 viewport，不触发真实分页引擎。
- 必须把规则写进 CSS 文件或
<style>块里，且无需额外属性 - 不要靠刷新页面看效果，每次修改后都要点“打印预览”再验证
- Firefox 的预览最接近真实输出；Chrome 有时会错误合并页边距，导致内容偏移
page-break-inside: avoid 对表格最有效，但别加在 <tr> 上
表格打印时被截断是最典型问题，根源是浏览器按纸张高度硬折行，而 <tr> 不支持 page-break-inside —— 这个属性在多数浏览器中对表格行完全无效。
正确做法是把 page-break-inside: avoid 加到整个 <table> 元素上，同时配合 page-break-after: auto 防止强制断页产生空白页。
立即学习“前端免费学习笔记（深入）”；
- 对动态高度表格，优先用
page-break-inside: avoid+display: block（避免display: table干扰） - 若表格实在太大，改用
page-break-before: always插入一个空<div class="page-break"></div>强制另起一页 - 避免给
<thead>单独设display: table-header-group：部分浏览器不识别该值在打印上下文中的语义
背景色、边框、图片默认不打印，得用 !important 强制
浏览器出于省墨考虑，默认忽略 background-color、border 和部分 <img> 渲染——这不是 bug，是规范行为。你写的样式若没生效，大概率是被默认策略屏蔽了。
必须显式覆盖，且推荐加 !important，因为用户浏览器可能启用了“仅打印文本”选项，会进一步降级样式优先级。
- 打印背景：写
background-color: #fff !important或background: #fff !important - 打印边框：用
border: 1px solid #000 !important，别依赖继承 - 图片保真：对关键图加
max-width: 100%; height: auto;防溢出纸张；还需-webkit-print-color-adjust: exact和color-adjust: exact
@page 控制纸张尺寸与页边距，但不能在里面写选择器
@page 规则专用于定义物理纸张行为，比如设 A4 尺寸、页眉页脚、页边距。但它**不能嵌套选择器**，也不能写 h1 { color: red; } 这类样式——那些得回 @media print 里写。
容易踩的坑是混淆 @page 和 @media print 的职责边界：前者管“纸”，后者管“内容”。例如，@page { size: A4; margin: 1cm; } 可以，但 @page { .header { display: none; } } 会直接被忽略。
- 设置页边距必须用绝对单位（
cm、mm、in），rem或%在这里无效 - 想让某元素总出现在每页顶部？用
@page :first { ... }或结合position: running()（但兼容性差，慎用） - Chrome 和 Firefox 对
break-before: page支持更好，可搭配@supports (break-before: page)做渐进增强
