项目中遇到的问题2：写好的页面右击打印预览出现空白

写好了一个页面，因为想让用户可以保存成PDF，在谷歌浏览器自己试了下，如下图，左侧和内容中间出现了空白区域：
尝试了很多办法都没解决，就把中间内容的样式注释了重新检查，发现我在写页面的时候为了让内容在一行显示使用的时flex布局，后来改成了float：left；再右击打印预览内容部分的空白消失了，但是左侧的灰色区域还存在。

在测试的过程中发现是因为浏览器的打印自带了边距所以出现了这个问题，在CSS中设置了如下样式完美解决。
下面代码的就是：使用“media”来指定特定的媒体类型，当媒体类型是print的时候执行下面的样式代码，这段代码的意思就是在调用打印方法的时候将左右两边的间距设置为0

@media print {
  @page {
    margin-left: 0;
    margin-right: 0;
  }
}