用 display: grid 划分票据区域比表格更可控，因其支持显式轨道定义、命名区域布局、精准打印适配及稳定分页控制。
用 display: grid 划分票据区域比表格更可控
表格（<table>）天生语义化，但票据常需跨区对齐、动态高度适配、打印缩放微调——这时候 Grid 的显式轨道定义反而更稳。<code>grid-template-areas 配合命名区域，一眼看清各块位置关系，改布局不用动 HTML 结构。
常见错误现象：colspan/rowspan 在打印预览里错位，或 CSS transform: scale() 后边框虚化；Grid 用 fr 单位+固定 minmax() 高度，能锁住关键区域比例。
- 头部区域设为
grid-area: header，固定min-height: 48px防文字撑高 - 商品明细行用
grid-template-rows: repeat(auto-fill, minmax(24px, 1fr)))，避免空行留白 - 金额汇总区单独设
grid-area: total，右对齐时用justify-self: end，不依赖text-align
细边框必须用 border 而非 outline 或阴影
票据打印对线宽精度敏感，outline 不占布局空间、无法控制单边，box-shadow 在 PDF 导出时大概率丢失。只有 border 能被所有浏览器和打印引擎一致解析。
使用场景：发票的“销售方/购买方”双栏分隔线、明细表头下划线、金额框外框——这些线在 A4 纸上必须清晰到 0.5pt 级别。
立即学习“前端免费学习笔记（深入）”；
- 统一用
border: 0.5px solid #000，不要写1px（高 DPI 屏幕会渲染成 2 物理像素，打印模糊） - 避免
border-collapse: collapse，它会让相邻单元格边框合并，导致打印时某条线变粗 - 需要“无边框但有间距”的地方，用
padding+background-clip: padding-box模拟，别靠border: none
打印样式里禁用 flex 布局，优先用 grid 或 float
Chrome 和 Edge 的打印预览对 Flex 的 flex-wrap 和 align-content 支持不稳定，常出现内容截断或换页错乱；Grid 的 page-break-inside: avoid 可精准控制分页点。
参数差异：flex-direction: column 在打印时可能被忽略，而 grid-template-rows 会严格按定义分配空间。
- 明细列表外层容器加
@media print { display: grid }，覆盖屏幕样式 - 每行明细加
break-inside: avoid，防止金额行被拆到两页 - 绝对定位元素（如右上角“发票专用章”）必须用
position: relative+top/right替代position: absolute，否则打印时消失
字体和字号必须用 pt 单位，禁用 rem 或 %
打印输出依赖物理尺寸，rem 依赖根字体大小，% 依赖父级，而打印机不解析 CSS 计算上下文。只有 pt（1pt = 1/72 英寸）能保证 A4 纸上文字高度恒定。
性能影响：用 px 在高 DPI 打印机上会缩放失真，em 在嵌套多层时误差累积，最终导致“金额栏宽度不够”这类硬伤。
- 正文统一用
font-size: 9pt，表头用10pt，金额数字用10.5pt（中文等宽字体下更易对齐） - 禁用
font-family列表里的非系统字体（如"PingFang SC"），Windows 打印机可能回退成宋体，字宽突变 - 中英文混排时，用
font-feature-settings: "tnum"强制数字等宽，避免金额列歪斜
margin 和 line-height。 
