HTML/CSS 打印页面样式完整指南（2026最新整理）

如果让你列出HTML/CSS中最值得掌握的知识点，打印页面样式应该榜上有名。它的应用场景广、使用频率高，投入产出比非常划算。

第一步：理解打印页面样式的基本概念

上线前对打印页面样式相关的功能做一轮完整测试，别只测正常流程。

多看看优秀开源项目里打印页面样式的用法，那是最好的学习材料。

第二步：动手实现打印页面样式

参考下面的实现（打印页面样式）：

@media print {
  /* 隐藏无关元素 */
  .navbar, .sidebar, .footer, .btn { display: none !important; }

  /* 打印用黑字白底，省墨又清晰 */
  body { color: #000; background: #fff; font-size: 12pt; }

  /* 链接后显示 URL，方便纸质查阅 */
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 90%; }

  /* 避免表格跨页被截断 */
  table { page-break-inside: avoid; }
}

第三步：验证与调优

• 删除操作尽量用软删除，数据丢了神仙也救不回来。
• 遇到诡异问题试试最小化复现：把无关代码都删掉，问题往往立刻现形。

写在最后

总结一下：打印页面样式的重点是理解适用场景，难点是处理边界情况，关键是多写多练。三者兼顾，想不掌握都难。

遇见问题加 QQ23979811 协助处理