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 是控制列印分頁的有效工具，可以幫助開發者建立更易讀、更專業的列印文件。 但是需要根據實際情況進行測試和調整，以達到最佳的列印效果。