打印样式中box-sizing常失效，因浏览器打印预览默认重置为content-box；需用!important强制border-box，并配合@page统一控制页边距与尺寸。
打印样式中 box-sizing 为什么经常失效
浏览器在打印预览时默认使用 screen 样式表的计算逻辑，但部分 UA 样式（如 Chrome 的打印视图）会强制重置 box-sizing 为 content-box，尤其对 <div>、<code><section></section> 等非替换元素。这意味着即使你在 @media print 里写了 box-sizing: border-box，也可能被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式为所有参与布局的容器设置
box-sizing: border-box !important，避免被 UA 样式覆盖 - 优先用
max-width/max-height替代固定width/height，防止内容溢出裁剪 - 避免依赖父容器的
padding来“撑开”子元素——打印时父级 padding 可能被压缩或归零
打印时 margin 和 padding 被浏览器自动缩放或清零
多数浏览器（Chrome、Edge）在打印时会对 margin 做标准化处理：页边距由用户打印设置决定，CSS 中的 margin 仅影响元素间相对距离，且可能被缩放到 0.25–0.5 倍；padding 则常因 DPI 换算偏差导致视觉错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@page规则统一控制物理页边距：@page { margin: 0.5in; } - 元素内间距改用
gap（对flex/grid容器有效）或line-height（文本块）替代padding - 需要精确留白时，用透明
border或伪元素::before占位，比margin更可控
打印样式中 width 设为 100% 却超出纸张宽度
根本原因是：打印上下文中的 100% 是相对于「打印区域」（即 @page 内容区）计算的，而该区域宽度 = 纸张宽 − 左右 @page margin。若未声明 @page，浏览器按默认值（通常 0.39in）计算，容易造成换行异常或横向滚动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终配对使用：
@page { size: A4; margin: 0.4in; }<br>body { width: 100%; box-sizing: border-box; } - 对表格等易撑破的元素，加
table-layout: fixed+width: 100%，并为th/td设置max-width - 禁用横向滚动：在
@media print中给根元素加overflow-x: hidden
@page 与元素 box-sizing 的协同关系——漏掉任意一环，都可能导致内容被截断或错页。
