在css3中重新规划打印样式的盒模型边距，核心做法是重置默认边距并显式定义`@page`规则。通过设置`body`的`margin: 0`消除浏览器默认间距，利用`@page { margin: ... }`控制页面四周留白，从而确保内容在纸张上布局合理且不被裁剪。
如何消除浏览器默认边距以防止内容溢出？
直接回答：通过为`body`元素设置`margin: 0`和`padding: 0`来清除默认样式，防止内容因默认内边距而超出纸张边界。
/* 基础重置 */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 打印媒体查询 */
@media print {
body {
margin: 0;
padding: 0;
}
}
上述代码确保了在打印时，`body`元素不会自带任何间距。`box-sizing: border-box`保证子元素的尺寸计算包含边框和内边距，避免意外溢出。实际运行中，若未重置`body`边距，内容可能会从页面边缘开始，导致视觉上的拥挤或裁剪。
如何通过@page规则精确控制页面四周留白？
直接回答：使用`@page`选择器设置`margin`属性，可以分别指定上下左右四个方向的留白值，从而精确控制打印页面的可用区域。
@media print {
@page {
size: A4;
margin-top: 2cm;
margin-right: 2.5cm;
margin-bottom: 2cm;
margin-left: 2.5cm;
}
/* 确保内容不覆盖页边距 */
body {
width: 100%;
max-width: none;
}
}
该代码片段展示了如何为A4纸张设置具体的页边距。`size: A4`明确指定纸张大小，而四个`margin-*`属性则定义了不可打印区域的宽度。这种设置能确保内容始终位于安全区域内，避免被打印机机械误差裁剪。注意，`@page`中的边距设置优先级高于`body`的边距，因此即使`body`有边距，也会被`@page`覆盖。
当内容高度超过一页时，如何避免分页截断关键信息？
直接回答：通过设置`page-break-inside: avoid`和`page-break-after: always`等属性，控制块级元素的分页行为，防止表格、列表或段落被不合理地切断。
@media print {
table, pre, blockquote {
page-break-inside: avoid;
}
h2, h3 {
page-break-after: avoid;
}
.section {
page-break-before: always;
}
}
此代码针对常见易被截断的元素进行优化。`table`和`blockquote`设置`avoid`后，浏览器会尝试将其完整保留在一页内，若空间不足则移至下一页。`h2`和`h3`标题后也设置`avoid`，防止标题与正文分离。`.section`类元素前强制分页，确保新章节从新页开始。这些设置共同作用，提升打印文档的可读性和专业性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
