举例说明与打印有关的属性有哪些？

前端开发中，与打印相关的属性有很多，它们可以控制打印页面的样式和内容。以下是一些常见的例子，并根据功能进行分类：

1. 页面尺寸和方向:

• size: 控制纸张大小。一些常见的值包括 A4, A3, letter, legal 等。也可以使用自定义尺寸，例如 8.5in 11in (英寸) 或 210mm 297mm (毫米)。 这通常在 @page 规则中设置。

  @page {
      size: A4 landscape; /* 横向A4 */
      size: 8.5in 11in; /* 自定义尺寸 */
  }
  

• orientation: 控制页面方向，值为 portrait (纵向) 或 landscape (横向)。

  @page {
      orientation: landscape;
  }
  

2. 页边距:

• margin: 设置页面所有边距。

  @page {
      margin: 2cm;
  }
  

• margin-top, margin-right, margin-bottom, margin-left: 分别设置页面上、右、下、左边距。

  @page {
      margin-top: 1in;
      margin-bottom: 1in;
  }
  

3. 分页控制:

• page-break-before / page-break-after / page-break-inside: 控制元素前、后或内部的分页符。常用的值有 auto, always, avoid, left, right。 avoid 尽量避免分页, always 强制分页, left / right 强制在奇数/偶数页。

  h1 { page-break-before: always; } /* 每个h1元素前强制分页 */
  table { page-break-inside: avoid; } /* 避免表格内容分页 */
  

• orphans / widows: 控制段落开头或结尾最少保留的行数，避免出现“寡行”或“孤行”。 这通常在 @page 规则中设置, 并且需要配合 page-break-inside: avoid; 使用.

  @page {
      orphans: 3; /* 段落底部至少保留3行 */
      widows: 2;  /* 段落顶部至少保留2行 */
  }
  p { page-break-inside: avoid; }
  

4. 打印特定内容:

利用媒体查询 @media print 可以设置仅在打印时生效的样式。

@media print {
    body {
        font-size: 12pt;
    }
    .no-print {
        display: none;
    }
}

• 上例中，打印时 body 的字体大小设置为 12pt，而类名为 no-print 的元素将被隐藏，不会被打印出来。

其他:

• page: 定义命名页面, 配合 page 属性使用, 可以将不同内容打印到不同样式的页面上. 例如:

  @page chapter1 { size: A4; }
  @page chapter2 { size: letter; margin: 1in; }
  
  <div style="page: chapter1;">第一章内容</div>
  <div style="page: chapter2;">第二章内容</div>
  

这些只是一些常用的打印相关属性，还有其他一些更高级的属性可以实现更复杂的打印控制。 选择合适的属性并结合实际需求进行调整，才能达到最佳的打印效果。 记住，浏览器的兼容性也需要考虑。

希望以上例子能帮助你理解与打印相关的属性。