---
title: '@page'
slug: Web/CSS/@page
tags:
  - '@page'
  - CSS
  - Web
  - 参考
  - 布局
  - 打印
translation_of: Web/CSS/@page
---
<div>{{CSSRef}}</div>

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

<pre class="brush: css no-line-numbers">@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}</pre>

<p><code>@page</code> 规则可以通过 CSS 对象模型接口的 {{domxref("CSSPageRule")}} 访问。</p>

<div class="note"><strong>注意：</strong>W3C 正在讨论如何处理和视图窗口有关的 {{cssxref("&lt;length&gt;")}} 的单位：<code>vh</code>、<code>vm</code>、<code>vmin</code> 和 <code>vmax</code>。目前，请不要在 <code>@page</code> 规则中使用他们。</div>

<h2 id="语法">语法</h2>

<h3 id="描述符">描述符</h3>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
 <dd>指定页面盒模型所在的容器的大小和方向。一般情况下，因为一个页面盒模型被渲染到一面纸张上，所以这个属性也指示了目标纸张的大小。</dd>
</dl>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
 <dd>向文档添加剪切标记和/或注册标记。</dd>
</dl>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
 <dd>为页面框盒指定一个限制区域，超过这个区域的页面内容将被裁剪。</dd>
</dl>

<h3 id="形式化语法">形式化语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="示例">示例</h2>

<p>请参考 <code>@page</code> 的各种<a href="/zh-CN/docs/CSS/Pseudo-classes">伪类</a>的例子。</p>

<ul>
 <li>{{Cssxref(":blank")}}</li>
 <li>{{Cssxref(":first")}}</li>
 <li>{{Cssxref(":left")}}</li>
 <li>{{Cssxref(":right")}}</li>
 <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
 <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>Adds the <code>:recto</code> and <code>:verso</code> page selectors</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
   <td>{{Spec2('CSS3 Paged Media')}}</td>
   <td>No change from {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a <code>@page</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("css.at-rules.page")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>See the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)</li>
</ul>