@page margin 必须用 mm、cm、in、pt 等绝对物理单位，禁用 px 和 %；body margin 对打印边距无效；page-break- 已被 break- 替代；@page :first 等伪类在 Chrome 中基本不生效，应改用 JavaScript 动态 class 配合 @media print 控制。
@page margin 必须用绝对单位，不能用 px 或 %
浏览器对打印边距的解析严重依赖物理单位。设 @page { margin: 20px; }，Chrome 可能按 96dpi 换算成约 15.8mm，但换台打印机或系统 DPI 不同，实际边距就漂移；@page { margin: 5%; } 则所有主流浏览器直接忽略——规范不支持相对单位用于分页边距。
可靠单位只有：mm（最推荐，A4 纸上 1:1 对应）、cm、in、pt（1/72 英寸）。例如：@page { margin: 15mm; } 是稳定写法。
常见误操作：
- 调
body { margin: 10mm; }试图缩窄打印边距 → 完全无效，body margin是内容区偏移，不改变纸张可打印区域 - 同时写
@page { margin-top: 20mm; }和body { margin-top: 10mm; }→ 内容离纸张顶边确实是 30mm，但这不是盒模型叠加，而是两段独立位移：先从纸边下移 20mm 进入可打印区，再从该区顶部再下移 10mm - 用
padding替代@page margin→padding只影响内容内部留白，对纸张边缘无任何作用
page-break-* 已基本失效，改用 break-* 并注意作用对象
page-break-before、page-break-inside: avoid 等老属性在 Chrome 100+、Firefox 102+ 中被大量忽略，尤其在 Flex/Grid 容器、transform 元素或 position: absolute 子项上直接不生效。
替代方案是现代 CSS 分页属性，但必须严格匹配作用对象：
-
break-inside: avoid只对块级容器生效，不能加在或 上；表格防撕裂要作用于整个 ，且建议显式设
display: blockbreak-after: avoid-page比page-break-after: avoid兼容性好得多，适用于卡片类结构（如.card）- Flex/Grid 子项无法直接控制分页 → 必须在外层包一层
，再对该div设break-before: page- 动态高度内容（如用户增删的表格行）宁可用空元素强制分页：
，配合@media print { .force-page-break { break-before: page; } }@page :first 在 Chrome 中几乎不工作，别依赖它
虽然规范写了
@page :first、@page :left，但截至 2026 年 9 月，Chrome 稳定版对这些伪类支持极弱——:first常降级为普通@page处理，:left/:right几乎总是被忽略。前端无法控制后端双面打印引擎，所以伪类不可靠。稳定方案是 JavaScript 配合 CSS：
- 打印前给
加 class：document.body.classList.add('print-first-page'); - 用常规样式控制：
body.print-first-page > .content { padding-top: 40mm; } - 避免写
@page :first { margin-top: 40mm; }—— 它大概率不会如你所愿
@media print 里样式不生效？优先查这三处硬伤
写了
@media print { .header { display: none; } }却还在预览里显示，问题往往不在语法本身：- 样式必须写在
内独立的标签中，不能混在组件内联 style 或 JS 注入的样式里 - 关键规则（尤其是
display: none、break-before）必须加!important，否则框架默认样式或浏览器打印设置会覆盖它 - 只信真实打印预览（Ctrl+P），DevTools 的 “Emulate media” 不触发分页引擎，模拟结果不可靠；Firefox 打印预览比 Chrome 更接近实际输出
复杂点在于：分页行为由浏览器排版引擎底层驱动，
@page控制的是物理纸张定义，@media print控制的是内容渲染策略，二者层级不同、互不感知。一旦你把它们当成同一套盒模型来调试，就会反复踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
