CSS 如何制作A4纸张大小的HTML页面

在本文中，我们将介绍如何使用CSS制作一个A4纸张大小的HTML页面。A4纸是国际标准ISO216定义的一种纸张规格，尺寸为210mm × 297mm。

阅读更多：CSS 教程

使用CSS设置页面尺寸

要制作一个A4纸张大小的HTML页面，我们可以使用CSS的@page规则来设置页面的尺寸。这个规则可以将样式应用到整个页面或特定的页面片段上。

首先，我们需要为HTML页面添加一个样式表：

<link rel="stylesheet" type="text/css" href="styles.css">

然后，在styles.css中，可以使用@page规则来设置页面的尺寸为A4：

@page {
  size: A4;
}

现在，整个HTML页面的尺寸将根据A4纸张大小来呈现。

设定页面外部边距和内部边距

除了设置页面尺寸，我们还可以使用CSS来定义页面的外边距和内边距。这样可以确保页面内容在A4纸上居中并具有适当的间距。

@page {
  size: A4;
  margin: 20mm;
}

body {
  padding: 20mm;
}

在上面的例子中，我们将页面的外边距设置为20mm，将body元素的内边距设置为20mm。这样就会在A4纸上留下适当的边距。

分页和打印样式

在A4纸张大小的HTML页面上，我们可能需要分页并应用不同的样式来适应打印需求。

使用@page规则时，我们可以通过@media print媒体查询来针对打印样式进行设置。例如，我们可以在每页的页眉和页脚添加一些信息：

@page {
  size: A4;
  margin: 20mm;
}

@media print {
  body {
    padding-top: 30mm;
  }

  @top-left {
    content: "页眉 - 左侧";
  }

  @top-right {
    content: "页眉 - 右侧";
  }

  @bottom-left {
    content: "页脚 - 左侧";
  }

  @bottom-right {
    content: "页脚 - 右侧";
  }
}