initial commit

3 files changed, 267 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html
new file mode 100644
index 0000000000..8ec7379cb5
--- /dev/null
+++ b/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html
@@ -0,0 +1,91 @@
+---
+title: Basic Concepts of Multicol
+slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">多列布局（通常称为multicol）是一种规范，用于将内容布置到一组列框中，就像报纸中的列一样。本指南解释了规范如何与一些常见的用例示例一起使用。</p>
+
+<h2 id="关键概念和术语">关键概念和术语</h2>
+
+<p> </p>
+
+<p>Multicol与CSS中的任何其他布局方法不同，它将内容（包括所有后代元素）分段为列。这与在使用CSS Paged Media时将内容分段为页面的方式相同，例如通过创建打印样式表。</p>
+
+<p>规范定义的属性有：</p>
+
+<ul>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("columns")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+
+<p>通过给一个元素添加 column-count 或 column-width,该元素变成了多列容器,或简称为 multicol 容器。这些列是都是匿名的盒子，在规范中描述为列盒子。</p>
+
+<h2 id="columns_定义">columns 定义</h2>
+
+<p>创建一个 multicol 容器必须使用至少一个 column-* 属性,这些就是 column-count 和 column-width。</p>
+
+<h3 id="column-count_属性"><code>column-count</code> 属性</h3>
+
+<p><code>column-count </code>属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。</p>
+
+<p>在以下示例中,我们使用 column-count 属性在.container 元素上创建三列 。.container 元素的内容包括其子元素都会分裂成三列。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<p>在上面的例子中内容被段落 p 标签的默认样式包裹。因此,每段都有一个间距。你可以看到这个间距引起第一行文本被推了下来。这是因为 multicol 容器创建了一个新的块格式化上下文（BFC)，这意味着子元素的间距不会与父容器的间距互相重叠。</p>
+
+<h3 id="column-width_属性"> <code>column-width</code> 属性</h3>
+
+<p><code>column-width</code> 属性用于给每列设置一个最佳宽度。如果你声明 <code>column-width</code>,浏览器将算出 该宽度在multicol 容器能分多少列，并且把额外的的空间填充到这些列当中。因此,应将列宽视为最小宽度,因为由于额外的空间，列可能而更宽。</p>
+
+<p>当单个列的可用宽度小于 column-width 的值的情况下，列的宽度会缩小为小于所声明的列宽。</p>
+
+<p>在以下示例中，我们使用 column-width 属性值为200 px。但最终为了适配容器，列的宽度却大于200像素，额外的空间被平均分配了。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}</p>
+
+<h3 id="同时使用_column-count_和_column-width">同时使用 <code>column-count</code> 和 <code>column-width</code> </h3>
+
+<p>如果在 multicol 容器上指定这两个属性，则 <code>column-count</code> 将作为最大列数。因此，将按<code>column-width</code> 的值计算，直到达到 <code>column-count</code> 定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不再绘制，并且额外空间在现有列之间均匀分布。</p>
+
+<p>同时使用这两个属性时，可能会获得的列数少于 <code>column-count</code> 数值中指定的列数。</p>
+
+<p>在下一个例子中，我们使用 column-width 的值为 200px，column-count 的值为 2。即使有超过两列的空间，我们也得到两个。如果没有足够的空间容纳两列 200px，我们得到一个。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}</p>
+
+<h3 id="columns_缩写"><code>columns</code> 缩写</h3>
+
+<p>您可以使用 columns 缩写来设置 <code>column-count</code> 和 <code>column-width</code>。如果设置长度单位，这将用于 <code>column-width</code>，设置一个整数，它将用于 <code>column-count</code>。您可以设置两者，用空格分隔这两个值。</p>
+
+<p>此 CSS 结果与示例1相同，column-count 设置为3。</p>
+
+<pre>.container {
+  columns: 3;
+}</pre>
+
+<p>此 CSS 结果与示例2相同，column-width 为200px。</p>
+
+<pre>.container {
+  columns: 200px;
+}</pre>
+
+<p>此 CSS 结果与示例3相同，同时设置 column-count 和 column-width。</p>
+
+<pre>.container {
+  columns: 2 200px;
+}</pre>
+
+<h2 id="下一步">下一步</h2>
+
+<p>在本指南中，我们学习了多列布局的基本用法。在<a href="/en-US/docs/Web/CSS/CSS_Columns/Styling_Columns">下一个指南</a>中，我们将看看我们可以为列本身设置多少样式。</p>
diff --git a/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html
new file mode 100644
index 0000000000..886a661776
--- /dev/null
+++ b/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html
@@ -0,0 +1,49 @@
+---
+title: 处理 Multicol 中的溢出
+slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - multi-column
+translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">在本指南中，我们将了解 multicol 如何处理溢出，包括在列框内以及内容超出容器容量的情况。</p>
+
+<h2 id="column_boxes_内部溢出">column boxes 内部溢出</h2>
+
+<p>当子项的大小大于列框时，就会发生溢出。例如，当列中的图像宽度大于 <code>column-width</code> 值或 <code>column-count</code> 声明的列数禅城的列宽度时，就可能会发生这种情况。</p>
+
+<p>在这种情况下，内容溢出（并且是可见的）到下一列，而不是被列框裁切。你可以在下面的示例中看到，在编写本文时，浏览器以不同的方式处理预期的呈现图像。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p>
+
+<p>如果你想要一个图像尺寸缩小到适合列框，标准的响应式的解决方案是设置最大宽度:100%。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
+
+<h2 id="更多的列">更多的列</h2>
+
+<p>如何处理溢出的列取决于是在一个片段化的媒体上下文（比如打印）中，还是在一个连续的媒体上下文（比如 web 页面）中。</p>
+
+<p>在一个片段化的媒体中，一旦碎片（例如页面）中充满了列，多出的列将移至新页面。 在连续介质中，列将沿横向溢出。 在 web 上，这意味着水平滚动条的出现。</p>
+
+<p>下面的示例显示了这种溢出行为。multicol 容器有一个高度，列的文本多于空间，因此多出的列会在容器外面出现。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
+
+<p>本规范的未来版本中，会允许横向溢出的列向下排列，用户能向下滚动鼠标查看溢出的列。</p>
+
+<h2 id="使用纵向的媒体查询">使用纵向的媒体查询</h2>
+
+<p>multicol 在 web 上的一个问题：如果你的列比 viewport 高，读者需要上下滚动来阅读，这样的用户体验不好。避免这种情况的一种方法是，只有在有足够的高度时才应用列属性。</p>
+
+<p>在下面的示例中，我们使用了 <code>min-height</code>。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
+
+<p>在本系列的最后一篇指南中，我们将看到<a href="/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">片段化下的 Muticol 如何使用</a>的规范，去控制列内容的溢出。</p>
diff --git a/files/zh-cn/web/css/css_columns/index.html b/files/zh-cn/web/css/css_columns/index.html
new file mode 100644
index 0000000000..d9492d2552
--- /dev/null
+++ b/files/zh-cn/web/css/css_columns/index.html
@@ -0,0 +1,127 @@
+---
+title: CSS 多列布局
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS参考
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+  - 概述
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef("CSS3 Multicol")}}</div>
+
+<p><strong>CSS多列布局（CSS Multi-column Layout）</strong>是一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。</p>
+
+<h2 id="基本示例">基本示例</h2>
+
+<p>在下列示例中，{{cssxref("column-count")}}属性应用于带有容器类的元素。因为<code>column-count</code>的值为<code>3</code>，所以内容排成等宽的3列。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<h2 id="Relationship_to_Fragmentation">Relationship to Fragmentation</h2>
+
+<p>Multiple-column Layout is closely related to <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore the properties now defined in the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> specification are required in order to control how content breaks between columns. </p>
+
+<h2 id="参考">参考</h2>
+
+<h3 id="多列布局属性">多列布局属性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h3 id="有关的CSS碎片化属性">有关的CSS碎片化属性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/zh-CN/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">多列的基本概念</a></dt>
+ <dd>多列布局的概述</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns/Styling_Columns">设置列的样式</a></dt>
+ <dd>如何使用列的分隔线，以及设置列间距。</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns/Spanning_Columns">Spanning and Balancing</a></dt>
+ <dd>How to make elements span across all columns and controlling the way columns are filled.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">Handling Overflow in Multicol</a></dt>
+ <dd>What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">Content Breaks in Multicol</a></dt>
+ <dd>Introduction to the Fragmentation specification and how to control where column content breaks.</dd>
+</dl>
+
+
+
+<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('CSS3 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th></th>
+   <th></th>
+   <th></th>
+   <th></th>
+   <th></th>
+   <th></th>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="sect1"></h2>
+
+<h2 id="参见">参见</h2>
+
+<p>其它CSS布局方法包括：</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS弹性盒子布局</a>（CSS flexbox）</li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS网格布局</a></li>
+</ul>
+
+<dl>
+</dl>
+</div>