@media print是唯一可靠方式，必须将其包裹隐藏规则以确保仅打印时生效；直接在全局CSS写display: none会导致页面加载即消失，破坏交互与布局。
只保留主体内容打印，核心不是“选中它”，而是让其他所有东西在打印时彻底不可见——靠 @media print 控制，不是靠 JS 删除或替换 DOM。
为什么不能用 display: none 在普通样式里隐藏非目标区域
常见错误是提前写 .header, .sidebar { display: none; }，结果页面一打开就没了导航栏。这不是局部打印，这是直接藏掉 UI。真正要的是“仅在打印预览/输出时隐藏”，且不影响用户浏览。必须把隐藏逻辑锁死在 @media print 作用域内，否则会破坏交互、触发重排、甚至让 Vue/React 组件失活。
-
display: none在打印时确实有效，但若误写在屏幕样式中，用户根本看不到页面 - 用
visibility: hidden更安全，但它仍占布局空间，可能导致目标区域被顶偏；加position: absolute是补救手段 - 最稳妥的写法是显式排除：比如
body > *:not(#print-section), #print-section ~ *，避免通配符误杀表单控件值
@media print 必须写的几条保命规则
光隐藏非目标区域远远不够。Chrome/Firefox 的打印引擎对浮动、定位、flex 布局支持极弱，不重置就会出现文字堆叠、表格劈成两页、背景色丢失等问题。
- 强制清除浮动：
* { float: none !important; } - 禁用绝对/固定定位：
* { position: static !important; }（尤其防旧 Edge 每页重复打 header） - 重设字体单位：
body { font-size: 12pt; line-height: 1.4; }，禁用rem、%、px - 补全链接地址：
a[href]:after { content: " (" attr(href) ")"; } - 启用背景色打印（如需）：
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
表格跨页断裂、表头消失怎么办
长表格是打印翻车重灾区。浏览器不会自动把 <thead> 复制到每页顶部，也不会阻止某行 <tr> 被硬生生切开。这些不是 bug，是默认行为。
立即学习“前端免费学习笔记（深入）”；
- 给
<tr>加page-break-inside: avoid !important;（注意部分浏览器要求同时设display: table-row） - 显式声明
thead { display: table-header-group; }和tfoot { display: table-footer-group; } - 禁用 flex/grid 包裹表格容器，一律改用
display: block; width: 100%; border-collapse: collapse; - 中文表格务必指定等宽字体：
font-family: "Microsoft YaHei", SimSun, sans-serif;
调试必须用浏览器打印预览，别跳过这步
很多人写完 CSS 就直接连打印机，结果打出空白页或半截表格才意识到问题。Chrome/Firefox 开发者工具里点“打印预览”（Ctrl+P → 选择“另存为 PDF”或直接看预览窗），能暴露 90% 的样式失效、分页错位、字体缺失问题。
特别注意：不要等图片加载完再进预览——有些图没加载成功，预览里就是空框，但你可能以为是 CSS 写错了。先确保所有资源可访问，再调样式。
