css @page規則控制列印設定選項

關於css控制列印更多內容可以參閱css控制列印內容的樣式一章節。

使用@page規則可以對列印進行更多的設定，比如指定頁面的尺寸。頁邊 距,頁首頁尾等，以求達到更好的效果。

下面做一下簡單介紹。

一.紙張大小設定:

[CSS] 純文字檢視 複製程式碼
@page {
  size: 5.5in 8.5in;
}

設定紙張大小,5.5英寸寬,8.5英寸高。

[CSS] 純文字檢視 複製程式碼
@page {
  size: A4;
}

通過別名控制紙張大小,如"A4"或“legal.”

[CSS] 純文字檢視 複製程式碼
@page {
  size: A4 landscape;
}

可以控制列印方向，portrait： 縱向列印地,  landscape: 橫向。

二.page模型:

在分頁媒體格式模型中，文件被轉移到一個或多個頁面框。

該頁框是對映到一個矩形平面。

這大致類似於css盒子模型:

特別說明:當前瀏覽器支援度還不夠。

[CSS] 純文字檢視 複製程式碼
@page { width: 50em; }

三.page邊距模型:

在進一步討論之前，我們應該瞭解的頁面的盒子模型，因為它的行為跟如何在螢幕上的工作有些不同。頁面模型定義了頁面區域，然後劃分了16個周邊緣盒。可以控制頁區域的大小和頁區域的邊緣和頁面本身的端部之間的餘量的尺寸。

左右頁邊距：

[CSS] 純文字檢視 複製程式碼
@page :left {
  margin-left: 30cm;
}
@page :right {
  margin-left: 4cm;
}

下面的css將在底部左邊顯示標題，在右下角的網頁計數器，並在右上角顯示一章的標題。 

[CSS] 純文字檢視 複製程式碼
@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  }
  @bottom-right { 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  }
  @top-right {
    content: string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  }
}

顯示效果如下: