标签打印时需用@media print显式重置：强制等宽字体栈、font-size用pt单位、启用print-color-adjust: exact、避免padding+border组合，并为加page-break-inside: avoid防跨页断裂。
<code> 标签在打印时默认样式不可靠：等宽字体可能回退成衬线体、背景色不出现、边框被裁切、行高压缩导致换行错乱——必须用 @media print 单独重置，且不能依赖屏幕样式继承。
为什么 <code> 打印出来字体变形、背景消失
浏览器默认不打印背景色和图片（包括 <code> 的 background-color），且多数系统在打印时强制降级字体栈。更关键的是，rem、em 或 px 字号在打印预览中物理尺寸浮动极大，中文尤其容易变方块或糊成一片。
- 必须显式声明等宽字体栈：
font-family: "Courier New", "SFMono-Regular", Consolas, monospace; - 字号强制用
pt单位，例如font-size: 10pt;（禁用rem、%、px） - 加
-webkit-print-color-adjust: exact; print-color-adjust: exact;才可能让背景色和边框生效 - 避免用
padding+border组合，部分打印机驱动会跳过整块区域；改用margin隔开内容更稳妥
<pre class="brush:php;toolbar:false;"><code></code> 嵌套结构的打印分页断裂问题</pre>
长代码块跨页时，<pre class="brush:php;toolbar:false;"></pre> 容器常被硬切开，下半截孤零零挂在第二页顶部，甚至丢失缩进。这不是 bug，是浏览器打印引擎对 white-space: pre 和分页逻辑支持薄弱所致。
- 给
<pre class="brush:php;toolbar:false;"></pre>加page-break-inside: avoid;（Chrome/Firefox 有效，Safari 需配合display: block;） - 若代码块仍断裂，拆成多个短
<pre class="brush:php;toolbar:false;"></pre>，中间插入<div class="new-page-here" style="page-break-before: always;"></div> - 禁用
overflow: auto或text-overflow: ellipsis—— 打印时这些属性直接失效，还可能触发渲染异常 - 不要用
flex或grid包裹<pre class="brush:php;toolbar:false;"></pre>，一律设为display: block; width: 100%;
HTML 源码本身作为内容打印时的字符转义陷阱
想把 <div>hello</div> 当作纯文本打印出来？直接塞进 <code> 里会解析成真实标签，页面上只显示 “hello”。必须先转义，再包裹，否则打印结果和预期完全不符。
- JS 转义四类字符：
→ <code><，>→>，&→&，"→" - 外层用
<pre class="brush:php;toolbar:false;"></pre>（保留换行与空格），内层用<code class="html">（语义明确 + 易于单独样式控制） - 打印样式中补一句：
pre, code { margin: 0; padding: 4pt 6pt; }，避免默认padding在 A4 上撑出意外空白 - 别在
@media print里写* { }全局重置 —— 它会干掉<pre class="brush:php;toolbar:false;"></pre>的white-space行为
真正难的不是写几行 CSS，而是意识到：打印通道和屏幕渲染是两套独立引擎，连 display: table-header-group 这种基础声明，在表格里都得手动补全，<code> 同理——所有样式必须显式、物理单位、无依赖地写死在 @media print 里，少一个点，预览就可能白屏或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
