html print 边距,css print
最近做表單打印，遂整理了一些打印相關的內容。
說到網頁打印，首先想到的便是@media查詢(即網頁css)，通過使用媒體類型print即可解決實際應用的大多數問題，比如實現只打印網頁的某部分內容，調整字體大小、修改布局等使打印出來的紙質文件更簡潔明了。代碼如下：
@media print{
/*隱藏不打印的元素*/
.no-print{
display:none;
}
/*其他打印樣式*/
}
但是，就打印表單來說，僅解決上述問題是不夠的，我們無法忍受表單存在打印分頁時內容被截斷、分頁顯示頂部沒有留白等問題。那么如何解決這些問題呢？這就要使用到css打印樣式了，即@page，用來指定頁面盒子的各個方面。
eg1：尺寸、頁邊距設置
@page{
size: 5.5in 8.5in; margin: 30px;
}
注：這里除了可以用長度值聲明尺寸，還可使用紙質尺寸關鍵字”A4″或“l(fā)egal”；亦可通過關鍵字指定頁面方向“portrait”、“l(fā)andscape”，默認為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;
}
}
總結
以上是生活随笔為你收集整理的html print 边距,css print的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cuda性能测试
- 下一篇： crf的实现 keras_你的 CRF