CSS Paged Media 怎么用?分页媒体模块如何实现打印分页布局?

文章导读
Previous Quiz Next CSS paged media 指一组用于为打印文档进行样式设计而使用的属性、@规则和伪类选择器。
📋 目录
  1. A CSS 分页媒体相关属性
  2. B CSS 分页媒体 @rules
  3. C CSS 分页媒体伪类
A A

CSS - 分页媒体



Previous
Quiz
Next

CSS paged media 指一组用于为打印文档进行样式设计而使用的属性、@规则和伪类选择器。

  • CSS paged media 提供了专为打印文档设计的额外功能和属性。
  • 使用这些属性,我们可以控制页面分隔、页边距、页眉、页脚等。
  • paged media 的关键属性包括 @page、orphans、widows、break-after、break-before 和 break-inside。
  • Paged Media 属性可以防止网页打印时出现不均匀和尴尬的情况。

CSS 分页媒体相关属性

以下是与 paged media 相关的 CSS 属性列表:

属性 描述 示例
break-after 用于在打印文档中强制在部分之后分页。
Try It
break-before 用于在打印文档中强制在部分之前分页。
Try It
break-inside 用于在打印文档中强制分页或避免在部分内部分页
Try It
orphans 指定当整个段落无法放置在页面底部时,放置在页面底部的行数最小值。
Try It
widows 指定当整个段落无法放置在页面顶部时,放置在页面顶部的行数最小值。
Try It

CSS 分页媒体 @rules

以下是与分页媒体相关的 CSS at-rules 列表:

属性 描述 示例
@page 这是一个媒体查询,用于为打印页面指定不同的 CSS 样式。
Try It

CSS 分页媒体伪类

以下是与分页媒体相关的 CSS pseudo-classes 列表:

属性 描述 示例
:first 此伪类用于单独选择文档的第一页进行样式设计。
Try It
:left 此伪类用于单独选择文档的所有左页进行样式设计。
Try It
:right 此伪类用于单独选择文档的所有右页进行样式设计。
Try It