打印样式表必须用 media="print"，正确写法为外链加 media="print" 或 @media print 包裹规则；隐藏元素需用 display: none !important 与 visibility: hidden !important 组合；字体用 pt、页边距用 in/cm；分页优先用 break-inside: avoid 和 break-before: page。
打印样式表必须用 media="print"
HTML 打印时浏览器默认会忽略大部分屏幕样式，直接套用系统打印逻辑——这意味着你写的 font-size: 16px、margin: 20px 很可能完全不生效。真正起作用的，是显式声明为打印用途的样式表或 CSS 规则。
正确写法只有两种：
- 外链样式表加
media="print"：<link rel="stylesheet" href="print.css" media="print">
- 在常规 CSS 中用
@media print块包裹专用规则：@media print {<br> body { font-size: 12pt; margin: 0.5in; }<br> .no-print { display: none; }<br>}
漏掉 media="print" 或写成 media="screen" 是最常见失效原因；Chrome 和 Edge 还会缓存打印样式，改完记得强制刷新（Ctrl+Shift+R）再试。
display: none 在打印中不一定可靠
你以为加个 display: none 就能隐藏导航栏、广告位？不一定。某些浏览器（尤其是旧版 Safari 和 IE）对打印上下文中的 display 解析有偏差，更稳妥的方式是组合使用：
- 给要隐藏的元素加类名如
no-print，并在@media print中写：.no-print { display: none !important; visibility: hidden !important; } - 避免依赖父容器的
display: none隐藏子元素——有些打印引擎会跳过整个父节点的样式计算 - 表单控件（
<input>、<select></select>）在打印时默认不显示值，需用 JS 提前把值写入<span></span>或用contenteditable="false"配合样式固化
字体和单位要用打印友好的类型
屏幕上看着舒服的 rem、vh、px 到打印时容易错乱：px 在高 DPI 打印机上会被缩放，rem 依赖根字体大小，而打印环境未必继承页面设置。
推荐做法：
- 字号统一用
pt（点），12pt ≈ 16px，是打印标准单位 - 页边距、行高用
in（英寸）或cm，比如margin: 0.75in - 禁用 Web 字体（如 Google Fonts），打印时加载失败会导致回退到默认衬线字体，排版崩塌；如必须用，确保已通过
@font-face本地加载并设置font-display: swap
分页控制不是加个 page-break-after 就完事
page-break-after: always 看似简单，但实际会受盒模型、浮动、Flex/Grid 布局干扰——尤其在 Chrome 115+ 后，break-after 类属性对 Flex 容器子项基本无效。
更可控的做法：
- 对需要独占一页的区块，用
break-inside: avoid防止内容被截断 - 用
break-before: page替代老旧的page-break-before（前者是现代标准） - 表格分页最危险：整张
<table> 要么全在一页，要么直接跨页撕裂；解决方法是给 <code><thead> 加 <code>display: table-header-group，并确保<tbody> 每行都可单独分页 <p>打印预览里拖动滚动条看分页线是否“卡在合理位置”，比代码写得漂亮更重要——真实纸张没有像素，也没有“差不多”。</p> </tbody>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
