现代浏览器已基本废弃page-break-属性，应改用break-系列CSS属性，并注意其对元素显示类型、父容器布局及BFC的依赖性。
page-break-* 在现代浏览器里基本失效，别硬扛
直接写 page-break-before: always 却没反应？不是你漏了 !important，也不是没进 @media print，而是 Chrome 100+、Firefox 102+ 已默认忽略大部分 page-break-* 值，尤其 avoid、left、right 几乎全被无视。它只对 position: static 或 relative 的块级元素起作用，一旦父容器是 display: flex 或 grid，或者子元素用了 float、absolute、transform，属性就直接被跳过。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
page-break-inside: avoid改成break-inside: avoid，但注意它仍只对块级容器生效，不能加在<tr> 或 <code><li>上 - 表格分页必须作用于整个
<table> 元素，而不是 <code><tr>；<code><td> 上设 <code>break-inside无效 - 遇到 Flex/Grid 容器内子项要分页，别试图在子项上加任何分页属性——改用包裹一层
div并对其设break-before: page - 确保规则写在
<head>内独立的<style>标签中，不要混在组件级内联style或 JS 注入的样式里 - 所有关键打印样式（尤其是
display: none、break-before）必须加!important，否则框架默认样式或用户浏览器设置会覆盖它 - 测试时只信真实打印预览（
Ctrl+P），DevTools 的 “Emulate media” 不触发分页引擎，模拟结果不可靠；Firefox 预览比 Chrome 更接近实际输出 - 对整张表用
break-inside: avoid（而非page-break-inside: avoid），并显式设display: block，避免display: table干扰 - 卡片类结构（如
.card）推荐统一用break-after: avoid-page，比旧版page-break-after: avoid兼容性好得多（Chrome 105+、Firefox 102+、Safari 16.4+ 支持） - 列表项
<li>无法单独控制分页，得把整个<ul></ul>或<ol></ol>包进一个div，再对这个div设break-inside: avoid - 如果内容高度动态且不可控（比如用户可增删的表格行），宁可用空
div强制分页：<div class="force-page-break"></div>，配@media print { .force-page-break { break-before: page; } } -
@page必须独立声明，不能嵌套在选择器里，也不能加!important - 基础写法：
@page { size: A4; margin: 1cm; }，size支持A4、letter、landscape等值 - 双面打印需用
@page :left和@page :right分别定义左右页样式，但注意：它们仅在启用“双面打印”时生效，单面打印下不触发 - 背景色、边框、图片默认不打印，必须用
background-color: #fff !important和border: 1px solid #000 !important显式开启
@media print 里样式不生效？检查这三处硬伤
写了 @media print { .header { display: none; } } 却还在打印预览里显示？常见原因不是语法错，而是作用域和优先级被绕过了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
表格、卡片、列表这类结构怎么防“撕裂”
标题在上一页、内容在下一页，或者表格行被砍成两半——这不是偶然，是这些结构天然不支持细粒度分页控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
@page 规则不是可选项，它是物理纸张的定义入口
只靠 body { margin: 2cm; } 想控制打印边距？浏览器打印对话框里的“最小边距”会强行覆盖它。真正能管住纸张尺寸、方向、页边距的，只有 @page。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是写哪条属性，而是不同结构对分页上下文的敏感度差异太大——break-inside: avoid 对 div 有效，对 tr 无效；@page 能控纸张，但控不了内容是否溢出；break-before: page 可靠，但滥用会导致空白页堆积。每个元素都要单独确认它的显示类型、父容器约束、以及是否处在 BFC 中。
