1 files changed, 104 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/@page/index.html b/files/zh-cn/web/css/@page/index.html
new file mode 100644
index 0000000000..3defa1a600
--- /dev/null
+++ b/files/zh-cn/web/css/@page/index.html
@@ -0,0 +1,104 @@
+---
+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>