打印样式需重写而非微调：grid命名区域失效、fr单位不可靠、浮动被忽略、table-layout:fixed导致列错乱、break-inside须加在子项上，且须清除非内容区块。
打印样式不是屏幕样式的微调，而是必须重写的独立布局层——浏览器打印引擎压根不按你写的 grid-template-areas、float 或 position: fixed 渲染，直接忽略或回退为 block。
为什么 @media print 里 grid-template-areas 完全失效
Chrome、Edge、Firefox 的打印引擎不解析命名区域映射，grid-area: header 在打印中等于未定义。它不会 fallback 到文档流，而是让元素退化为无序块级排列。
- 必须显式重写整个容器的
grid-template-columns和grid-template-rows，哪怕只是grid-template-columns: 1fr - 用线号定位替代命名区域：
grid-column: 1 / -1（跨整行）、grid-row: 2（起始行），禁用span 2这类隐式写法 -
fr单位在打印中极不可靠：可能算成 0px、撑满整页，或让百分比失效；改用px或带明确父高前提下的% - 删掉
justify-items、align-content—— 多数浏览器静默忽略，不报错也不生效
浮动元素在打印预览中“乱飘”，根本不是渲染错
打印引擎根本不处理 float 的脱离文档流语义，所谓“错位”是它被强制回退为块级行为，但又没重置尺寸和流向的结果。
- 统一加
float: none !important到所有可能浮动的容器（如.sidebar、.ad-banner），别只修表格本身 - 配套清掉
clear：clear: none !important，否则残留逻辑会制造意外空白 - 若原布局依赖浮动实现多栏，现在必须显式设宽：
width: 100% !important+display: block !important - 更治本的做法：把浮动父容器改为
display: flow-root，它既能包裹子项，又能让break-inside: avoid真正生效
表格右侧被截断、列宽错乱，90% 出在 table-layout: fixed
Element UI、Ant Design 等组件库默认启用 table-layout: fixed，靠 width 属性撑列，但打印时列宽计算完全丢失，内容全挤到左边或溢出纸张。
- 在
@media print中强制重写：table { table-layout: auto !important; width: 100% !important; } -
colgroup在打印中基本被忽略，改用tbody tr:first-child td配合min-width控制最小列宽 - 避免单独给
th设width—— 打印中常失效；统一用td的min-width+white-space: nowrap - 如果表格嵌在浮动容器里，先清浮动父级，再调表格样式，顺序不能反
break-inside: avoid 加在哪才真正起作用
加在 grid 容器上等于没加。打印分页机制对容器无感知，只认每个子项是否允许被切断。
- 必须加在每个
grid-item上：.card { break-inside: avoid; } - item 内若有
<p></p>或<ul></ul>，它们也得各自加break-inside: avoid - Safari 16.4 以下不支持该属性作用于
grid-item，需降级：display: block+page-break-inside: avoid -
gap不触发分页，但会放大物理间距——上一个 item 刚好卡在页尾时，gap就可能把下一个 item 整体推到下一页；建议@media print中设gap: 0，改用margin-bottom控制间距
最常被跳过的动作：不是检查某条规则有没有写，而是确认所有非内容区块（导航、按钮、广告、模态框）是否都进了 @media print 白名单；只要漏一个 .toast 或 .dropdown-toggle，它就可能在第 3 页顶部突然出现，打乱整篇排版。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
