1. 前言
在网页设计中，我们经常需要控制打印页面的设置，以便打印出适合用户查看的清晰页面。但是有时候，我们想要禁用浏览器打印选项中的一些设置，如页眉、页脚、边距等。这些元素可能会对页面布局造成干扰或浪费纸张空间，因此我们需要掌握如何使用CSS来禁用它们。
本文将详细介绍如何使用CSS的@page渲染属性和@media打印属性来实现上述功能。我们将从实例出发，逐步解释如何实现这些设置。
/* 通过@page属性来设置打印选项 */
@page {
size: A4; /* 设置页面尺寸，可选A4、Letter等 */
margin: 0;
}
/* 定义一个名为no-print的class，用于指定不打印元素的样式 */
.no-print {
display: none;
}
/* 在@media print条件下，为需要禁用的元素添加no-print类 */
@media print {
header, footer {
display: none; /* 隐藏页眉和页脚 */
}
body {
margin: 0; /* 去掉页面边距 */
}
.print-only {
display: block; /* 显示仅打印元素 */
}
.no-print {
display: none; /* 隐藏不打印元素 */
}
}
2. @page 属性
CSS提供了@page规则，用于控制打印页眉、页脚、边距等选项。这个规则只能出现在样式表的顶层，且不能在其他规则块中嵌套使用。下面是一些常用的@page属性：
size属性：设置纸张大小，可以是预定义的尺寸，也可以用具体数值指定，如A4、Letter、210mm、297mm等。
margin属性：设置页面边距，用四个值来表示，如margin: 20mm 10mm 30mm 40mm，依次为上、右、下、左的边距。
marks属性：控制打印时是否显示剪裁、交叉等标记，取值为none、crop、cross、auto或string。
page-break-before 、page-break-after和page-break-inside属性：控制分页的方式，可选值为auto、always、avoid、left、right、inherit、initial等。
例如，下面的代码设置A4大小的页面，边距为0：
@page {
size: A4;
margin: 0;
}
2.1 size属性
size属性用于设置纸张大小，常见的取值有A4、Letter等预定义值，也可以用具体数值指定，比如210mm、297mm等。
例如，下面的代码将页面大小设置为A4：
@page {
size: A4;
}
除此之外，size属性还可以接收一些修饰符，用于确定页面大小的宽度、高度和方向：
auto：根据打印机的设置自动确定页面大小。
portrait：页面竖向显示。
landscape：页面横向显示。
width：指定页面宽度。
height：指定页面高度。
min-width：指定最小宽度。
max-width：指定最大宽度。
min-height：指定最小高度。
max-height：指定最大高度。
例如，下面的代码将页面宽度设置为400像素，高度为自动：
@page {
size: 400px auto;
}
2.2 margin属性
margin属性用于设置页面边距，包含四个值，按顺序表示上、右、下、左的边距大小，取值可以是像素、厘米、英寸、毫米、百分比等，也可以使用其他与CSS属性中相同的单位。如果只设置单个值，则表示上下左右的边距均为该值；如果设置两个值，则第一个值表示上下的边距，第二个值表示左右的边距；如果设置三个值，则第一个值表示上的边距，第二个值表示左右的边距，第三个值表示下的边距。
例如，下面的代码将页面边距设置为20毫米：
@page {
margin: 20mm;
}
3. @media 打印属性
@media提供了一个方便的途径，让我们可以指定打印版本的样式，从而控制在不同的媒体上显示不同的内容。例如，我们可以通过@media打印属性来隐藏不必要的元素或添加一些仅在打印版本中才显示的元素，以便用户能够以最佳的方式查看打印页面。
在CSS中，@media规则块被用来分别应用于不同的媒体类型。@media打印属性用于指定在打印模式下应用的样式。
例如，下面的代码将在打印模式下隐藏头部和尾部元素：
@media print {
header, footer {
display: none;
}
}
3.1 隐藏页眉和页脚
我们可以使用@media打印属性来隐藏打印页面的页眉和页脚。这是一个非常简单的任务，只需在@media块中将页眉和页脚的display属性设置为none即可。
例如，下面的代码将在打印页面中隐藏头部和尾部元素：
@media print {
header, footer {
display: none;
}
}
3.2 去掉页面边距
我们还可以使用@media打印属性来去除打印页面的边距。这也是一个容易实现的功能，只需在@media块中将body元素的margin属性设置为0即可。
例如，下面的代码将在打印页面中去掉所有的边距：
@media print {
body {
margin: 0;
}
}
3.3 显示和隐藏特定元素
有时候，我们需要在打印页面中隐藏某些元素或显示某些仅打印元素。为了实现这个功能，我们可以使用一些自定义类和@media打印属性。为了便于识别哪些元素是需要隐藏或显示的，我们在HTML中为它们分别添加一个名为no-print的class和一个名为print-only的class，然后在@media块中将它们分别设置为display:none和display:block。
例如，在下面的代码片段中，我们在文本块上添加了一个no-print类，它将被用于禁止打印。另外，我们还隐藏了触发打印的按钮，这样用户就无法在打印页面上再次触发打印操作。
This text will appear only in the printed version of the page.
This text will not appear in the printed version of the page.
随后，在CSS中定义这两个类并将它们与@media打印属性关联起来，如下所示：
/* 在.print-only类上设置打印样式 */
@media print {
.no-print {
display: none;
}
.print-only {
display: block;
}
}
4. 总结
本文介绍了如何使用CSS的@page渲染属性和@media打印属性来禁用浏览器打印选项中的页眉、页脚、边距等。我们从实例出发，讲解了如何使用@page属性来设置打印选项，如何使用@media属性来控制打印样式，以及如何隐藏或显示特定元素。这些技术可以让我们为用户提供更好的打印体验，并确保打印结果的可读性和可用性。
/* 通过@page属性来设置打印选项 */
@page {
size: A4; /* 设置页面尺寸，可选A4、Letter等 */
margin: 0;
}
/* 定义一个名为no-print的class，用于指定不打印元素的样式 */
.no-print {
display: none;
}
/* 在@media print条件下，为需要禁用的元素添加no-print类 */
@media print {
header, footer {
display: none; /* 隐藏页眉和页脚 */
}
body {
margin: 0; /* 去掉页面边距 */
}
.print-only {
display: block; /* 显示仅打印元素 */
}
.no-print {
display: none; /* 隐藏不打印元素 */
}
}