css print

【摘要】 前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。考必过为大家整理了css print，想学习前端的小伙伴可以看过来！css print的详细内容如下：

最近做表单打印，遂整理了一些打印相关的内容。

说到网页打印，首先想到的便是@media查询（即网页css），通过使用媒体类型print即可解决实际应用的大多数问题，比如实现只打印网页的某部分内容，调整字体大小、修改布局等使打印出来的纸质文件更简洁明了。代码如下：

@media print{

    /*隐藏不打印的元素*/
    .no-print{
        display:none;
    }
    /*其他打印样式*/
}

但是，就打印表单来说，仅解决上述问题是不够的，我们无法忍受表单存在打印分页时内容被截断、分页显示顶部没有留白等问题。那么如何解决这些问题呢？这就要使用到css打印样式了，即@page，用来指定页面盒子的各个方面。

eg1：尺寸、页边距设置

2025年监理工程师-考点精讲班体验课

¥0

去购买​

@page{
     size: 5.5in 8.5in;       
     margin: 30px;
}

注：这里除了可以用长度值声明尺寸，还可使用纸质尺寸关键字”A4″或“legal”；亦可通过关键字指定页面方向“portrait”、“landscape”，默认为portrait垂直方向。当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。

eg2：设置第一页、奇数页或偶数页样式（以首页为例）

@page :first { 

    /*首页设置*/

}

注：left、right分别为偶数页、奇数页选择器。

eg3:避免表格断开

@page{
    table{
        page-break-after: avoid;
    }  
}

注：page-break-after对tr、td不起作用所以当以整体出现的时候要在同一个table中。

eg4:避免某行文字断裂

@page{
    table{
        page-break-inside: avoid;
    }  
}

以上就是css print的详细内容，在学习前端的过程中大家要学会利用网络解决问题。只看理论是不能带来提到的，将学到的知识进行实践才能帮助我们熟悉代码的运用，特别是项目经验，可以为我们带来很大的提升哦！