@media print 怎么分页

在 CSS 中，我们可以使用 `page-break` 属性来控制页面的分页。

常用的 `page-break` 属性有以下几种：

1. `page-break-before`：在当前元素前插入分页符。
2. `page-break-after`：在当前元素后插入分页符。
3. `page-break-inside`：控制元素内部的分页行为。

例如，我们可以在打印的时候，每一页之间插入一个分页符，可以使用以下样式：

@media print {
  body {
    page-break-after: always;
  }
}

这样，在打印的时候，每一页之间都会插入一个分页符，确保每一页的内容都不会混淆在一起。

相关问题

@media all {.page-break { display: none; }}@media print {.page-break { displ

ay: block; }} 这段代码的作用是什么？

这段代码的作用是在所有的媒体类型中（all），将具有.page-break类的元素的显示设置为不显示（display: none）。然而，在打印媒体类型（print）中，将具有.page-break类的元素的显示设置为显示（display: block）。

在网页设计中，有时候需要在打印时进行页面分页。为了控制打印页面的分页位置，我们可以在需要分页的位置插入一个具有.page-break类的元素。通过这段代码中的@media规则，我们可以灵活地控制在不同媒体类型下的页面分页显示。

当在屏幕上进行浏览或其他媒体展示时，页面分页元素将被隐藏，不会干扰文档的显示。而在打印时，则显示这些页面分页元素，并根据其位置进行页面分页。

这段代码的作用就是在保留页面分页元素的前提下，根据不同媒体类型的要求，灵活地设置页面分页元素的显示与隐藏，实现在不同媒体上的页面分页效果。

window.print 自动分页

在使用`window.print`进行浏览器打印时，分页是由浏览器自动处理的，而不是由JavaScript代码控制。浏览器会根据内容和打印设置自动决定如何分页。

然而，你可以通过调整页面的样式和布局来影响分页的结果。以下是一些可能有助于改善分页的技巧：

1. 控制页面大小和边距：使用CSS的`@page`规则可以控制页面的大小和边距，以便更好地适应打印纸张。例如：

@page {
  size: A4;
  margin: 1cm;
}

2. 避免强制分页：某些CSS属性（如`page-break-before`、`page-break-after`、`page-break-inside`等）可以用来控制元素的分页行为。避免在关键位置使用这些属性，以免导致不必要的分页。

3. 调整内容布局：通过调整元素的宽度、高度、间距等，可以尽量避免在不合适的位置发生分页。确保文本和图片能够在合适的位置避免出现截断或分割的情况。

4. 使用分栏布局：如果你希例如：

@media print {
  .content {
    column-count: 2;