[分享]css写a4大小

CSS是网页设计中非常重要的一部分，在实现页面布局中扮演了重要的角色。而对于一些需要打印的内容，我们也可以通过CSS来控制样式，实现A4纸张大小的设计。首先需要明确一下，A4纸张大小为210mm × ...

CSS是网页设计中非常重要的一部分，在实现页面布局中扮演了重要的角色。而对于一些需要打印的内容，我们也可以通过CSS来控制样式，实现A4纸张大小的设计。

首先需要明确一下，A4纸张大小为210mm × 297mm。因此，我们以此为基础，来控制我们网页中的样式。

@media print {
  body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* 设置背景颜色，避免打印时出现背景图或颜色 */
  }
  p {
    text-align: justify; /* 设置对齐方式 */
    font-size: 12pt; /* 设置字号 */
    margin-top: 0mm; /* 设置段落上下间距 */
    margin-bottom: 5mm;
    line-height: 1.5; /* 设置行高 */
  }
  pre {
    font-size: 12pt; /* 设置字号 */
    margin-top: 0mm; /* 设置段落上下间距 */
    margin-bottom: 5mm;
    line-height: 1.5; /* 设置行高 */
  }
  img {
    max-width: 100%; /* 设置图片最大宽度 */
    max-height: 100%; /* 设置图片最大高度 */
  }
} 

上述代码中，我们首先使用@media print来判断打印状态，然后设置body的宽高为A4大小，并将页面的margin和padding都设置为0，避免出现多余的空白。

接着，我们针对p和pre两种标签进行设置。在这里，我们主要控制了段落的对齐方式、字号、段落间距和行高等属性，让打印出来的文本更加美观。

最后，我们针对图片进行了设置，让图片不会超出A4纸张大小，从而保证打印的整体美观。

通过这样的设置，我们可以在打印前通过CSS来优化页面样式，实现更好的打印效果。