打印样式需用@media print隐藏非内容元素、补全链接URL、重设字体边距、处理图片显示并跨浏览器测试。具体包括：.no-print{display:none}隐藏导航广告；a[href]:after输出链接地址；body设serif字体和12pt；@page设页边距；img确保可见；-webkit-print-color-adjust支持背景图；最后须在Chrome/Edge/Safari中实测预览。
打印时隐藏导航栏和广告区
网页默认会把所有可见元素塞进打印页面，导致页眉、侧边栏、广告位全挤在纸上。关键不是删掉它们，而是用 @media print 把它们视觉隐藏——不影响屏幕浏览，也不破坏 DOM 结构。
- 给不需要打印的区域加 class，比如
<div class="no-print">... - 在 CSS 中写：
@media print {<br> .no-print { display: none !important; }<br>} - 避免用
visibility: hidden，它仍占打印空间；也别用opacity: 0，有些浏览器会照常打印
强制打印时显示链接 URL
纯文本打印里，<a href="https://example.com">点这里</a> 只剩“点这里”，用户根本不知道跳去哪。CSS 的 content 和 attr() 能补上这个缺口。
- 加这段规则即可：
@media print {<br> a[href]:after {<br> content: " (" attr(href) ")";<br> font-size: 0.8em;<br> color: #666;<br> }<br>} - 注意：只对带
href的<a>生效；mailto:和tel:链接也会被输出，一般没问题 - 如果页面有大量内链（如锚点
#section1），可加条件过滤：a[href^="http"]:after
调整字体、边距和分页断点
屏幕用的 14px 无衬线字体，在 A4 纸上小得难以阅读；默认页边距又太窄，装不下内容。打印样式必须重设基础排版。
- 重置 body 字体：
@media print {<br> body {<br> font-family: "Times New Roman", serif;<br> font-size: 12pt;<br> line-height: 1.4;<br> }<br>} - 用
@page控制纸张边距：@page {<br> margin: 1in;<br>}（注意：Chrome 支持，但 Safari 对@page的 margin 设置有限制） - 防止标题被截断：给
h1,h2加page-break-after: avoid；表格行用page-break-inside: avoid避免跨页撕裂
图片打印模糊或不显示？检查 src 和 display
常见现象是打印预览里图片变灰、消失，或分辨率暴跌。根源通常是图片路径为相对地址、CSS 覆盖了 display，或用了背景图。
立即学习“前端免费学习笔记（深入）”；
- 确保
<img>的src是绝对路径或可访问的相对路径（打印时浏览器不会执行 JS 动态加载） - 移除影响显示的样式：
@media print {<br> img {<br> max-width: 100% !important;<br> height: auto !important;<br> display: inline-block !important;<br> }<br>} - 背景图默认不打印，若必须输出，请加：
-webkit-print-color-adjust: exact;（Chrome/Safari），并确认 background-image 使用的是实际图片而非渐变
@media print 的解析差异——尤其是分页控制和字体回退。改完务必在 Chrome、Edge、Safari 的打印预览里各试一次，别只信开发工具里的模拟。 
