用@media print控制打印分页需显式声明break-before、break-after和break-inside等CSS属性，优先使用break-before: page；表格分页需组合设置thead、tbody及兜底page-break-inside；调试须通过打印预览检查真实样式应用。
用
@media print
控制打印时的分页位置
浏览器默认不会按你期望的位置分页，必须显式声明。核心是用 CSS 的
@media print
块配合分页属性，而不是靠 HTML 标签或 JS 模拟。
常见错误是只加
或空
，这些对打印引擎完全无效。真正起作用的是
page-break-before
、
page-break-after
和现代等效的
break-before
/
break-after
。
break-before: page
：强制在该元素前分页（推荐优先用这个，
page-break-before
在部分 Chrome 版本中已被标记为弃用）
break-inside: avoid
：防止表格、卡片等内容被截断跨页（对
或带
display: block
的容器特别有用）
不要对
或内联元素设分页属性——它只对块级元素生效
如果页面有固定页眉/页脚，需配合
@page
规则设置
margin
，否则可能被裁掉
避免表格跨页断裂的实操写法
表格是最容易出问题的结构：表头消失、行被切成两半、列宽错乱。单纯设
break-inside: avoid
不够，得组合处理。
给
加
break-inside: avoid
，但注意它只在父容器高度足够时才生效；如果表格本身超一页，这条会失效
给
加
break-after: avoid
，确保表头不和第一行数据分开
给
加
break-inside: avoid
效果有限，更可靠的是把每行
包进一个
，再对每个
设
break-inside: avoid
Chrome 115+ 对
break-inside
在
上的支持仍不稳定，可降级用
page-break-inside: avoid
兜底
调试打印样式时的关键检查点
打印预览里看不到效果？大概率是样式没命中或被覆盖。别依赖“看起来像”，要查真实渲染树。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
打开浏览器打印预览（
Ctrl+P
/
Cmd+P
），右键 → “检查” → 切到
Styles
面板，确认当前选中的元素是否应用了
@media print
下的规则
检查是否误用了
display: none
或
visibility: hidden
—— 这些会让内容彻底不出现在打印输出中
如果用了 CSS-in-JS（如 Emotion、Styled Components），确认
@media print
规则已注入到
，且未被动态移除
PDF 导出工具（如 wk
html
topdf）对
break-*
支持更弱，测试时务必用原生浏览器打印预览，而非截图或 PDF 插件
@page
规则能做什么、不能做什么
@page
只控制纸张层面的布局，比如页边距、尺寸、方向，但它无法指定某段 HTML 出现在第几页，也不能插入页码——页码需要靠
content: counter(page)
配合伪元素实现。
@page { margin: 1cm; size: A4; }
是安全的，所有主流浏览器都支持
@page :first { margin-top: 2cm; }
在 Firefox 中有效，但在 Chrome 中常被忽略，慎用
页眉页脚内容必须用
@page
+
::before
/
::after
，且只能包含纯文本或简单计数器，不能放图片或复杂 HTML
不要指望
@page
能解决内容分页逻辑问题——它只是容器，分页逻辑还得靠
break-*
属性控制元素行为
实际项目中最容易被忽略的是：打印样式表的加载时机和优先级。如果用
，要确保它没被其他
!important
规则覆盖；如果内联在
