与打印相关的CSS样式
引入打印样式：
方法1:
<link rel="stylesheet" href="print.css" media="print" />
方法2:
<style type="text/css">
@media print selector {
...
}
@media print {
selector{
...
}
}
</style>
方法3:
<style type="text/css">
@import url(print.css) print;
</style>
度量单位：
打印时要使用物理单位，比如cm或in(英寸)。
A4纸的标准尺寸为: 21.0cm * 29.7 cm
1 inch = 2.54 cm
1 cm = 96/2.54 ≈ 37.80 px
1 px = 2.54/96 ≈ 0.0265 cm
@page规则：
@page规则指定了打印页面的一些属性，包括纸张尺寸，方向，页边距，分页等特性。
@page :pseudo-class {
size: A4 landscape;
margin: 2cm;
}
CSS3里面增加了几个新的样式：
•marks: none | [ crop || cross ] 裁切
•bleed: auto | <length> 出血
•box-decoration-break: slice | clone 如果元素被分页，边框怎么处理
打印相关样式表
以下样式都可以在@page的伪类中使用。
•page-break-before 用于设置元素前面的分页行为，可取值：
•auto 默认值。如果必要则在元素前插入分页符。
•always 在元素前插入分页符。
•avoid 避免在元素前插入分页符。
•left 在元素之前足够的分页符，一直到一张空白的左页为止。
•right 在元素之前足够的分页符，一直到一张空白的右页为止。
•inherit 规定应该从父元素继承 page-break-before 属性的设置。
•page-break-after 设置元素后的分页行为。取值与page-break-before一样。
•page-break-inside 设置元素内部的分页行为。取值如下:
•auto 默认。如果必要则在元素内部插入分页符。
•avoid 避免在元素内部插入分页符。
•inherit 规定应该从父元素继承 page-break-inside 属性的设置。
•orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
•widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。
比如:
@media print {
section {page-break-before: always;}
h1 {page-break-after: always;}
p {page-break-inside: avoid;}
}
@media print {
p {orphans:3; widows:2;}
}
其他：
1. 对于页面上有显示而不想打印的内容，可以将其display设置为none来避免打印。
2. 需要打印的内容尽量避免float，有些浏览器不会正确的打印浮动的内容。