根本原因是打印上下文中width: 100%参照@page内容区（纸张宽−左右margin），而非视口或父容器；若未显式声明box-sizing: border-box，padding会额外叠加导致溢出，必须在@media print中为关键元素显式设置该属性。
为什么 width: 100% 在打印时会撑出纸张
根本原因不是你写错了，而是打印上下文里「100%」的参照物变了：它不再相对于视口或父容器，而是相对于 @page 的内容区宽度，而该区域 = 纸张宽 − 左右 @page margin。Chrome 默认 @page margin 是 0.39in（约 1cm），A4 宽 21cm，实际内容区只剩约 19cm —— 你设 width: 100% 的 div 就按这 19cm 算，但若父级没声明 box-sizing: border-box，再加 padding: 8px 就直接溢出。
- 必须配对使用：
@page { size: A4; margin: 0.4in; }+body { width: 100%; box-sizing: border-box; } - 表格类容器要额外加：
table-layout: fixed;和width: 100%，否则单元格自动伸缩极易破页 - 避免对
html或body设height: 100%—— 打印不认这个，反而导致内容被截断到第二页
box-sizing: border-box 在 @media print 中为何不生效
浏览器打印引擎（尤其 Chrome/Edge）会重置 UA 样式，把未显式声明的 div、section 等默认回 content-box，哪怕你在屏幕样式里写了全局 * { box-sizing: border-box }，打印时也无效。
- 必须在
@media print块内为关键容器显式设置：box-sizing: border-box !important - 重点覆盖：
div、main、article、.print-container这类参与布局的元素 - 如果用了 reset.css 或 normalize.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改用更可控的替代方案：flex/grid 容器用gap；文本块用line-height；需要精确留白时，用border-top: 12px solid transparent占位 - 禁用横向滚动：
@media print { html, body { overflow-x: hidden; } }，否则溢出内容会强制换页
验证时最容易忽略的三个动作
改完 CSS 后，光刷新页面或点「打印预览」按钮是不够的 —— 浏览器缓存或样式注入时机可能导致规则未生效。
- 每次修改后，必须关闭当前打印预览窗口，再按
Ctrl+P（Windows）或Cmd+P（macOS）重新唤起，才能触发完整样式重载 - 若用 CSS-in-JS（如 styled-components），确认其支持
media="print"属性，否则生成的@media print规则可能根本没注入 DOM - 真实打印机走一单（哪怕选 PDF 打印机），比仅看预览更可靠 —— 部分裁剪、分页逻辑只在最终输出阶段才触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
