盒模型在打印预览中被截断，根本原因是浏览器打印引擎绕过屏幕样式，不继承box-sizing、margin等属性，必须在@media print中显式重置；width: 100%参照@page内容区（纸张宽−左右margin），未设border-box时padding/border会额外叠加导致溢出。
盒模型在打印预览中被截断，不是 CSS 写错了，而是浏览器压根没按你写的盒模型规则渲染——@media print 里必须显式重置 box-sizing、margin、padding，否则全按 UA 默认值（content-box + margin: 0）走。
为什么 width: 100% 在打印时横向溢出
打印上下文中 width: 100% 的参照物是 @page 的内容区宽度（纸张宽 − 左右 margin），不是视口或父容器。若未声明 box-sizing: border-box，padding 和 border 就会额外叠加：
-
@page { size: A4; margin: 0.4in; }→ A4 宽 8.5in，内容区理论宽 7.7in -
body { width: 100%; padding: 0.2in; }→ 实际宽 = 7.7in + 0.4in = 8.1in，已超安全上限 8.3in - Chrome/Firefox 对
px在高 DPI 屏幕上的解析偏差会让问题更隐蔽
如何在 @media print 中正确重置 box-sizing
屏幕样式里写的 * { box-sizing: border-box } 打印时完全无效，UA 会重置为 content-box。必须在打印媒体查询内显式覆盖：
- 开头加
* { box-sizing: border-box !important; }，确保所有后代生效 - 对关键布局容器单独强化：
body, main, .print-area { box-sizing: border-box !important; } - 若用了
reset.css，检查它是否在打印上下文中注入了box-sizing: content-box，用!important覆盖
为什么 margin 和 padding 在打印预览里“消失”
浏览器打印引擎会对 margin 做标准化缩放（常压到 0.25–0.5 倍），padding 则因 DPI 换算偏差导致视觉偏移；Firefox 还会主动塌陷外边距。
- 放弃简写：
margin: 1cm改成margin-top: 1.5cm; margin-bottom: 0.8cm; -
padding改用更可控的替代：gap（flex/grid）、line-height（文本）、border-top: 12px solid transparent（精确留白） - 禁用横向滚动：
@media print { html, body { overflow-x: hidden; } }，否则溢出内容强制换页
修复后仍被截断？检查这三个动作是否做完
改完 CSS 后，光刷新页面或点「打印预览」按钮是不够的——浏览器缓存或样式注入时机可能导致规则未生效。
- 每次修改后，必须关闭当前打印预览窗口，再按
Ctrl+P（Windows）或Cmd+P（macOS）重新唤起 - 确认框架（如 Ant Design）的打印样式没有更高权重，必要时用更具体选择器：
body@media print .el-table - 检查是否有残留
float或position: absolute/fixed—— 它们会让分页逻辑连锁失效，且break-inside对其完全无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
