现代浏览器已弃用 page-break-* 属性，应改用 break-inside: avoid 并作用于每个块级子元素；打印样式须加 !important、置于 head 内 style 标签中，且仅通过真实打印预览验证。
为什么直接写 page-break-inside: avoid 常常失效
不是语法错，也不是没进 @media print，而是现代浏览器（Chrome 100+、Firefox 102+、Safari 16.4+）已基本弃用 page-break-* 系列属性。它们只对 position: static 或 relative 的块级元素起作用；一旦父容器是 display: flex 或 grid，或子元素用了 float、absolute、transform，这些属性就直接被跳过。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
break-inside: avoid，但必须加在**每个要保护的块级子元素上**，加在容器上无效（尤其对grid或flex容器） - 表格分页必须作用于整个
<table> 元素，<code><tr> 和 <code><td> 上设 <code>break-inside无效 - 卡片类结构（如
.card）优先用break-after: avoid-page，兼容性比旧版page-break-after: avoid更好 - 动态内容（如用户可增删的行）宁可用空
<div class="force-page-break"></div>配@media print { .force-page-break { break-before: page; } } - 所有关键打印样式（尤其是
display: none、break-before）必须加!important，否则框架默认样式或浏览器 UA 样式会覆盖它 - 确保规则写在
内独立的<style></style>标签中，不要混在组件内联style或 JS 注入的样式里 - 测试时只信真实打印预览（
Ctrl+P），DevTools 的 “Emulate media” 不触发分页引擎，模拟结果不可靠；Firefox 预览比 Chrome 更接近实际输出 - 每个
grid-item必须单独加break-inside: avoid；如果 item 内还有<p></p>或<ul></ul>，它们也得各自加 - 必须用
@supports (break-inside: avoid)隔离规则，降级目标是page-break-inside: avoid，且作用对象仍要是块级元素（如.card > p） - 禁用
fr单位、gap和grid-template-areas：打印媒体中这些特性行为不可靠；gap建议设为0，改用margin-bottom控制间距 - 绝对定位元素（如右上角章）必须用
position: relative+top/right替代，否则打印时消失 - 字体必须用
pt单位（如font-size: 12pt），px在不同 DPI 设备上渲染不一致 - 边框建议用
0.5px solid #000而非1px，避免打印时过粗或糊成一片 - 表格表头重复必须靠
thead { display: table-header-group; }，不能靠 JS 插入副本——后者在分页时无法保证每页都出现 - 内容高度不可控时（如富文本含图片、嵌入 iframe），提前用
max-height: 80vh+overflow: hidden截断，再配break-before: page强制另起一页，比硬扛“撕裂”更可控
@media print 样式不生效的三个硬伤
写了 @media print { .header { display: none; } } 却还在打印预览里显示？常见原因不是优先级低，而是规则没落进正确上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Grid 和 Flex 容器里的分页怎么写才安全
给 grid 容器加 break-inside: avoid 等于没写——因为分页机制只检查块级子元素是否允许断开，而 grid-item 默认不是块级，break-inside 不会穿透上下文生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
字体、边框与内容高度的隐藏陷阱
打印输出依赖物理尺寸，很多屏幕端“看起来没问题”的写法，在 PDF 导出或真实打印机上会彻底失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对某一条规则，而是理解浏览器打印引擎如何把 CSS 盒模型映射到物理纸张——它不渲染动画、不执行 JS、不加载异步资源，只做一次静态重排。任何依赖运行时计算的分页逻辑（比如 JS 判断高度后插入分页符），在真实打印中都不可靠。
