打印样式中box-sizing常失效，因浏览器打印预览默认重置为content-box；需用!important强制border-box，并配合@page统一控制页边距与尺寸。
打印样式中 box-sizing 为什么经常失效
浏览器在打印预览时默认使用 实操建议： 立即学习“前端免费学习笔记（深入）”； 多数浏览器（Chrome、Edge）在打印时会对 实操建议： 立即学习“前端免费学习笔记（深入）”； 根本原因是：打印上下文中的 实操建议： 立即学习“前端免费学习笔记（深入）”；screen 样式表的计算逻辑，但部分 UA 样式（如 Chrome 的打印视图）会强制重置 box-sizing 为 content-box，尤其对 等非替换元素。这意味着即使你在 @media print 里写了 box-sizing: border-box，也可能被忽略。
box-sizing: border-box !important，避免被 UA 样式覆盖max-width / max-height 替代固定 width / height，防止内容溢出裁剪padding 来“撑开”子元素——打印时父级 padding 可能被压缩或归零打印时
margin 和 padding 被浏览器自动缩放或清零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）计算，容易造成换行异常或横向滚动。
打印样式不是屏幕样式的简单复制，盒模型各属性在物理输出阶段受页面尺寸、DPI、UA 默认策略三重干预，最易被忽略的是 @page { size: A4; margin: 0.4in; }
body { width: 100%; box-sizing: border-box; }table-layout: fixed + width: 100%，并为 th/td 设置 max-width
@media print 中给根元素加 overflow-x: hidden
@page 与元素 box-sizing 的协同关系——漏掉任意一环，都可能导致内容被截断或错页。
