page-break-before 和 page-break-after 属性主要用于控制打印网页时的分页，它们分别指定元素前或后是否强制分页。虽然在屏幕显示上通常没有效果，但在打印或生成PDF等基于分页的媒体时非常有用。
以下是一些常见的应用场景：
-
章节标题: 在每个章节标题前使用
page-break-before: always;，确保每个章节都从新的一页开始，提高打印文档的可读性。 -
表格: 对于长表格，可以使用
page-break-inside: avoid;避免表格内容被分割到不同的页面上，保证表格的完整性。 或者在表格前使用page-break-before: always;让表格总是从新的一页开始。 -
图片: 类似表格，对于重要的图片，可以使用
page-break-before: always;或page-break-after: always;来控制图片的分页，避免图片被切割，或者确保图片及其相关说明文字在同一页上。 -
分组内容: 对于一组相关的元素，例如一个包含标题、描述和图片的产品介绍，可以使用这些属性确保它们打印在同一页上，避免内容被分散。 可以将这些元素包裹在一个div中，然后在这个div上使用
page-break-inside: avoid;。 -
打印样式表: 通常，这些属性会在打印样式表中使用，例如：
@media print {
h1 { page-break-before: always; }
table { page-break-inside: avoid; }
}
- 生成PDF: 当使用工具将网页转换为PDF时，这些属性同样有效，可以控制PDF文档的分页效果。
属性值:
auto: 默认值，由浏览器决定是否分页。always: 总是强制分页。avoid: 避免分页。left: 强制在左侧的空白页后分页 (只对page-break-after有效)。right: 强制在右侧的空白页后分页 (只对page-break-after有效)。initial: 设置属性为默认值。inherit: 从父元素继承属性值。
需要注意的点:
- 这些属性的效果取决于浏览器和打印机的支持程度，不同浏览器和打印机可能会有不同的解释。
page-break-inside: avoid;并不总是有效，特别是当元素高度超过一页时，浏览器可能会强制分页。- 建议结合其他CSS属性，例如 margins 和 padding，来微调分页效果。
总而言之，page-break-before 和 page-break-after 是控制打印分页的有效工具，可以帮助开发者创建更易读、更专业的打印文档。 但是需要根据实际情况进行测试和调整，以达到最佳的打印效果。