CSS Define Paged

一、定義分頁——CSS分頁文檔流程

    
        @page {
            size: auto;
            margin: 0;
        }
        @media print {
            html, body {
                width: 210mm;
                height: 297mm;
                overflow: hidden;
                page-break-after: always;
                margin: 0 !important;
            }
        }
    

CSS Define Paged是CSS3中的一個獨特特性，使得網頁內容項可以自動分頁到多個頁面顯示，從而實現網頁排版效果的類印刷品。CSS Paged Media規範包括定義了一種用於排版文檔的樣式屬性語言，也就是將所定義的具體排版方案按照CSS樣式運用到已經編寫好的HTML文檔當中。

Paged用於定義分頁樣式，通過對CSS分頁文檔流程的定義，指定網頁的頁面大小，邊距，分頁符，頁面數等屬性，達到最終的排版效果。 CSS Define Paged使得網頁臃腫不堵塞，在視覺呈現上更為流暢。

以經典的A4紙大小及邊距為例，定義網頁大小為210mm x 297mm，同時限制overflow屬性，讓網頁內容始終在定義的頁面內顯示，再通過page-break-after屬性，實現網頁自動分頁，其中定義條件@media print用於被列印到紙張上的部分。

二、基本屬性——size和margin

    
        @page {
            size: A4;
            margin: 2cm 1.5cm;
        }
    

size屬性定義分頁的大小，它可以取固定長度值或者可選的「auto」值。根據不同的媒介指定不同的頁面尺寸，例如A4、Letter等。

margin屬性定義頁面周圍的邊距，這裡的「2cm 1.5cm」表示上、下邊距為2厘米，左、右邊距為1.5厘米。使用這些屬性，可以在定義網頁視圖時更加精確地控制頁面外觀，提供良好的可讀性。

三、特殊屬性——page-break-after和page-break-before

    
        @page {
            size: A4;
            margin: 2cm 1.5cm;
        }
        .content{
            page-break-after: always;
        }
    

page-break-after和page-break-before屬性設置HTML標籤在頁面分割時斷開到下一頁或前一頁，使整個頁面更加美觀。page-break-before和page-break-after屬性只在分頁媒體上應用，比如列印或PDF文檔中，對於Web瀏覽器和屏幕頁面則不可見。

在上面的示例中，為每個內容塊定了page-break-after: always，使得每個div作為一個獨立的頁面展示。如需控制每個頁面上下文相關性，可以在selector中設置break-before和break-after屬性作為分頁控制指示元素。

四、自動分頁：Paged Media、Overflow、Columns和Region

Paged Media是分頁模型，允許自動創建在瀏覽器之外的相對位置的分頁元素，這些元素是基於頁面尺寸和規則，直到滿足閉合的分頁計算結果。

Overflow屬性允許包含多列文本塊，並定義了一個非分頁操作，使文本塊只出現在當前沒有適合的區域真正可見時。

Columns屬性默認情況下為「auto」，this為1，並且需要您通過清晰度或無序適當地分析出工具欄的適當設置，如果內容無法適應給定的列數，則可以生成新的分頁元素填充互補空間。

Region可以幫助您處理類似於多列分頁的狀況，但對於設置分頁按鈕界面較為複雜，通常不建議使用。

五、在實踐中應用

本文展示了如何使用少量的CSS代碼來創建真實世界的分頁設計，使用簡單的CSS代碼定義出了頁面尺寸、頁邊距和特殊的分頁行為。

在實際應用中，需要注意頁面設置的基準，例如針對A4紙張的製作可以使用210mm x 297mm的頁面大小屬性，頁面寬高調整需要確保正確裁剪，保證文檔輸出的準確性。同時，CSS Define Paged的兼容性較低，不同瀏覽器的處理方式可能存在差異，需要對不同瀏覽器做不同的兼容處理。

六、總結

CSS Define Paged提供了分頁排版樣式的實現，讓排版更加簡單易懂。通過CSS的定義，網頁的排版效果可以在頁面上自動分割為多個頁面，類似列印出來的紙張。

通過分頁樣式，可以對頁面的大小、邊距和分頁等屬性進行具體的定義，讓頁面更加精細，頁面間隔更加清晰。同時，定義分頁樣式還可以通過CSS代碼輕鬆控制頁面的分頁效果，讓網站的內容更加美觀。