打印友好页面的核心是“隔离 + 重置 + 干预”：必须用@media print隔离逻辑，@page控制物理纸张，break-系列属性干预分页，三者缺一不可且顺序不可颠倒。
直接给结论：打印友好页面不是靠“加样式”，而是靠“隔离 + 重置 + 干预”。核心是用 @media print 隔离打印逻辑，用 @page 控制物理纸张，再用 break- 系列属性干预分页点——三者缺一不可，且顺序不能乱。
如何用 @media print 隐藏非内容元素并重置布局
浏览器默认会把网页所有样式（包括浮动、flex、背景图、阴影）原样输出，但纸张不认这些。必须在 @media print 里做彻底重置：
-
* { float: none !important; position: static !important; }—— 浮动和绝对定位在打印时极易导致内容错位或消失 -
.no-print, nav, header, .ads, .btn-print { display: none !important; }—— 显式隐藏所有非正文区域；!important是必须的，否则可能被原有样式覆盖 -
a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #333; }—— 让链接可追溯，避免纸上只剩“点击这里” - 禁用背景色与图片：
body, div, section { background: transparent !important; }，否则可能被打印机忽略或耗墨严重
为什么 @page 规则必须写，且不能只靠 margin
@page 不是可选项，它定义的是物理纸张本身。只靠 body { margin: 2cm; } 无法真正控制边距，因为浏览器打印对话框里的“最小边距”设置会强行覆盖它。
-
@page { size: A4; margin: 15mm; }—— 这才是真正生效的页面边距；注意单位必须是mm或in，px无效 -
@page :first { margin-top: 25mm; }—— 首页可加大上边距，留出装订空间 -
@page { size: portrait; }或landscape—— 明确方向，避免部分浏览器默认横向导致内容被裁 - ⚠️ 注意：
@page不能写在@media print内部，必须平级声明，否则完全不生效
break-before 和 page-break-before 到底该用哪个
答案是：两个都写，顺序是 break-before 在前，page-break-before 在后。现代浏览器优先识别 break-，老版本（如 IE11）只认 page-break-。
- 强制章节从新页开始：
.chapter { break-before: page; page-break-before: always; } - 防止表格跨页断裂：
table { break-inside: avoid; page-break-inside: avoid; } - 避免标题孤零零挂在页尾：
h2 { break-after: avoid; page-break-after: avoid; } - ⚠️ 关键限制：
break-inside: avoid对inline元素无效，只对块级容器起作用；如果套在<span></span>上，毫无效果
调试打印样式时最容易忽略的三件事
很多问题不是代码写错，而是调试方式不对：
- 别只看“打印预览”窗口——它常缓存旧样式；每次改完 CSS 后，必须硬刷新（
Ctrl+Shift+R），再打开预览 - Chrome DevTools 的 “Rendering” 面板里勾选
Emulate CSS media type → print，能实时看到效果，比反复打印快得多 - 生成 PDF 检查最终效果：
Ctrl+P → 选择“另存为 PDF”；有些分页行为（比如break-before: page）在 PDF 中才暴露真实表现 - 表格行数动态变化时，
break-inside: avoid可能失效——此时需用tr:nth-child(n)手动在每 N 行后加break-after: page
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
