initial commit

1 files changed, 145 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/break-before/index.html b/files/zh-cn/web/css/break-before/index.html
new file mode 100644
index 0000000000..e0c9ea142b
--- /dev/null
+++ b/files/zh-cn/web/css/break-before/index.html
@@ -0,0 +1,145 @@
+---
+title: break-before
+slug: Web/CSS/break-before
+tags:
+  - break-before
+translation_of: Web/CSS/break-before
+---
+<div>{{CSSRef}}</div>
+
+<p>The<strong> <code>break-before</code></strong> <a href="/en-US/docs/CSS">CSS</a> 属性定义页面，列或区域在生成的盒子之前应如何处理中断。 如果没有生成的盒子，则忽略该属性。</p>
+
+<pre class="brush:css no-line-numbers">/* Generic break values */
+break-before: auto;
+break-before: avoid;
+
+/* Page break values */
+break-before: avoid-page;
+break-before: page;
+break-before: always;
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* Column break values */
+break-before: avoid-column;
+break-before: column;
+
+/* Region break values */
+break-before: avoid-region;
+break-before: region;
+
+/* Global values */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+</pre>
+
+<p>Each possible break point (in other words, each element boundary) is affected by three properties: the {{cssxref("break-after")}} value of the previous element, the <code>break-before</code> value of the next element, and the {{cssxref("break-inside")}} value of the containing element.</p>
+
+<p>To determine if a break must be done, the following rules are applied:</p>
+
+<ol>
+ <li>If any of the three concerned values is a <em>forced break value</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, or <code>region</code>), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the <code>break-before</code> value has precedence over the <code>break-after</code> value, which itself has precedence over the <code>break-inside</code> value).</li>
+ <li>If any of the three concerned values is an <em>avoid break value</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, or <code>avoid-column</code>), no such break will be applied at that point.</li>
+</ol>
+
+<p>Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<p>The <code>break-before</code> property is specified as one of the keyword values from the list below.</p>
+
+<h3 id="Values">Values</h3>
+
+<h4 id="General_break_values">General break values</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Allows, but does not force, any break (page, column, or region) to be inserted right before the principal box.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Avoids any break (page, column, or region) from being inserted right before the principal box.</dd>
+</dl>
+
+<h4 id="Page_break_values">Page break values</h4>
+
+<dl>
+ <dt><code>avoid-page</code></dt>
+ <dd>Avoids any page break right before the principal box.</dd>
+ <dt><code>page</code></dt>
+ <dd>Forces a page break right before the principal box.</dd>
+ <dt><code>always</code></dt>
+ <dd>Forces a page break right before the principal box. (This is an alias of <code>page</code>, and has been kept to facilitate the transition from {{cssxref("page-break-after")}}, which is a subset of this property.)</dd>
+ <dt><code>left</code></dt>
+ <dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a left page.</dd>
+ <dt><code>right</code></dt>
+ <dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a right page.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)</dd>
+</dl>
+
+<h4 id="Column_break_values">Column break values</h4>
+
+<dl>
+ <dt><code>avoid-column</code></dt>
+ <dd>Avoids any column break right before the principal box.</dd>
+ <dt><code>column</code></dt>
+ <dd>Forces a column break right before the principal box.</dd>
+</dl>
+
+<h4 id="Region_break_values">Region break values</h4>
+
+<dl>
+ <dt><code>avoid-region</code> {{experimental_inline}}</dt>
+ <dd>Avoids any region break right before the principal box.</dd>
+ <dt><code>region</code> {{experimental_inline}}</dt>
+ <dd>Forces a region break right before the principal box.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Adds the <code>recto</code> and <code>verso</code> keywords. Changes the media type of this property from <code>paged</code> to {{xref_cssvisual}}. Defines the breaking algorithm with different kinds of breaks.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>Extends the property to handle region breaks. Adds the <code>avoid-region</code> and <code>region</code> keywords.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Initial definition. Extends the CSS 2.1 {{cssxref("page-break-before")}} property to handle both page and column breaks.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.break-before")}}</p>
+</div>
+
+<p> </p>