根本原因是默认content-box模型与打印引擎对margin/padding的隐式重置共同导致盒尺寸失控；必须全局设box-sizing:border-box并重置所有容器的margin和padding，否则后续调整均无效。
打印样式中盒模型尺寸失控，根本原因不是“没写 @media print”，而是默认的 content-box 模型 + 浏览器打印引擎对 margin/padding 的隐式重置共同导致的——必须显式覆盖并锁定计算逻辑。
为什么打印时 padding 和 border 会“撑开”页面？
浏览器在打印预览中通常保留默认 box-sizing: content-box，而你写的 width: 100% 仅指 content 区域。一旦元素有 padding: 16px 和 border: 1px solid #000，实际宽度就变成 100% + 34px（左右各 16px + 1px），超出 A4 宽度（约 595px）后内容被截断或换页错乱。
- 打印引擎（如 Chromium 的 PDF 导出）不会自动缩放带 padding/border 的块级元素，它只按 CSS 计算后的像素值渲染
-
margin在打印中可能被忽略或压缩（尤其margin-top/margin-bottom），但padding和border始终参与盒尺寸计算 - 部分打印机驱动还会强制添加 0.25in 页边距，进一步挤压可用区域
必须全局设置 box-sizing: border-box 并重置所有容器
不加这一步，后续所有尺寸调整都是徒劳。打印样式里不能依赖“父容器撑开子元素”的惯性思维。
- 在
@media print中第一行就写：* { box-sizing: border-box; } - 紧接着重置所有常见容器的
margin和padding：body, article, section, div { margin: 0; padding: 0; } - 特别注意表单控件（
input,textarea）：它们在打印时默认有内边距和边框，需单独设padding: 0; border: none;
用 @page 配合 size 和 margin 精确控制物理边界
@page 不是可选项，它是唯一能干预纸张物理尺寸和留白的规则。不声明它，浏览器就按默认 1in 页边距渲染，跟设计稿对不上。
立即学习“前端免费学习笔记（深入）”；
- 指定纸张尺寸和方向：
@page { size: A4 portrait; margin: 0.5in; } - 如果需要无边距打印（如标签、票据），用
margin: 0;，但要确保内容区域也同步收缩（否则会被裁切） - 用
@page :first单独处理首页页眉/页脚，避免页码或标题挤占正文空间 - 注意：
@page中不能使用百分比或 em 单位，只接受绝对长度单位（in,cm,mm,pt）
打印专用尺寸类要避开百分比和 auto 值
打印输出是静态快照，不支持响应式伸缩。任何含 width: auto、max-width: 100% 或 flex: 1 的规则，在打印时都可能退化为不可预测的宽度。
- 固定宽度优先：用
width: 550px（A4 减去左右各 0.5in ≈ 36px 后的可用宽度）代替width: 100% - 字体大小统一用
pt（如font-size: 12pt），避免屏幕像素单位在打印时缩放失真 - 慎用
background：多数浏览器默认禁用背景打印，如需保留，必须在打印设置中勾选“背景图形”，且建议用background-clip: content-box避免 padding 区域误染色
最容易被忽略的是：打印样式生效的前提是元素在 DOM 中真实存在且未被 display: none 或 visibility: hidden 隐藏——动态生成的报表内容如果靠 JS 插入后未触发重排，@media print 规则可能不匹配。务必在插入完成后手动调用 window.print()，而非依赖用户点击菜单。
