• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • @page

    @page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性,而是只能修改marginorphanswidow和 page breaks of the document。对其他属性的修改是无效的。

    示例

    @page {
      margin: 1cm;
    }
    
    @page :first {
      margin: 2cm;
    }
    

    注意:W3C 正在讨论如何处理和视图窗口有关的<length>的单位:vhvmvminvmax。目前,请不要在@page规则中使用他们。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    safari浏览器不支持@page,IE8以上版本的浏览器都支持@page

    语法

    @page{sizemarksbleed}
    • size:指定页面盒模型所在的容器的大小和方向。一般情况下,因为一个页面盒模型被渲染到一面纸张上,所以这个属性也指示了目标纸张的大小。
    • marks:向文档添加剪切标记和/或注册标记。
    • bleed:为页面框盒指定一个限制区域,超过这个区域的页面内容将被裁剪。

    例子

    @page rotated{size:landscape;}
    
    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    <style>
    	@page :first{margin:300px;}
    </style>
    </head>
    <body>
    <div>@page:first{margin:300px;}</div>
    </body>
    </html>	
    

    上篇::right