最近做表單打印，遂整理了一些打印相關的內容。

說到網頁打印，首先想到的便是@media查詢(即網頁css)，通過使用媒體類型print即可解決實際應用的大多數問題，比如實現只打印網頁的某部分內容，調整字體大小、修改布局等使打印出來的紙質文件更簡潔明了。代碼如下：

@media print{

/*隱藏不打印的元素*/

.no-print{

display:none;

}

/*其他打印樣式*/

}

但是，就打印表單來說，僅解決上述問題是不夠的，我們無法忍受表單存在打印分頁時內容被截斷、分頁顯示頂部沒有留白等問題。那么如何解決這些問題呢？這就要使用到css打印樣式了，即@page，用來指定頁面盒子的各個方面。

eg1：尺寸、頁邊距設置

@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;

}

}

總結

以上是生活随笔為你收集整理的html print 边距,css print的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。