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代码轻松控制页面的分页效果，让网站的内容更加美观。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/158033.html