diff options
Diffstat (limited to 'files/zh-cn/learn/css/css_layout')
16 files changed, 6312 insertions, 0 deletions
diff --git a/files/zh-cn/learn/css/css_layout/flexbox/index.html b/files/zh-cn/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..22b14745c6 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,329 @@ +--- +title: 弹性盒子 +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - CSS + - CSS 布局 + - Layouts + - Learn + - flexbox + - 初学者 + - 弹性框 + - 教程 + - 文章 +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。 本文将解释所有的基本原理。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>HTML 基础 (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>)，和了解CSS如何工作的(study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>学会如何使用弹性盒子布局系统来创建Web布局。</td> + </tr> + </tbody> +</table> + +<h2 id="为什么是_弹性盒子">为什么是 弹性盒子?</h2> + +<p>长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">floats</a> 和 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。</p> + +<p>以下简单的布局需求是难以或不可能用这样的工具（ <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">floats</a> 和 <a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>）方便且灵活的实现的：</p> + +<ul> + <li>在父内容里面垂直居中一个块内容。</li> + <li>使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。</li> + <li>使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。</li> +</ul> + +<p>正如你将在后面的章节中看到的一样，弹性盒子使得很多布局任务变得更加容易。让我们继续吧！</p> + +<h2 id="一个简单的例子">一个简单的例子</h2> + +<p>在本文中，我们将通过一系列练习来帮助你了解 弹性盒子的工作原理。开始前，您应该拷贝 mozila github 仓库的 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">弹性盒子0.html</a> 到本地 。在现代浏览器里打开它（比如 Firefox、Chrome），然后打开你的编辑器看一眼它的代码。你可以看它的<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">线上</a>实例。</p> + +<p>你可以看到这个页面有一个含有顶级标题的 {{htmlelement("header")}} 元素，和一个包含三个 {{htmlelement("article")}} 的 {{htmlelement("section")}} 元素。我们将使用这些来创建一个非常的标准三列布局，如下所示：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="指定元素的布局为_flexible">指定元素的布局为 flexible</h2> + +<p>首先，我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 {{cssxref("display")}} 设置一个特定值。在本例中，我们想要设置 {{htmlelement("article")}} 元素，因此我们给 {{htmlelement("section")}}（变成了 flex 容器）设置 display：</p> + +<pre class="brush: css">section { + display:flex +}</pre> + +<p>结果如下：</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>所以，就这样一个简单的声明就给了我们所需要的一切—非常不可思议，对吧？ 我们的多列布局具有大小相等的列，并且列的高度都是一样。 这是因为这样的 flex 项（flex容器的子项）的默认值是可以解决这些的常见问题的。 后面还有更多内容。</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>注意：</strong>假如你想设置行内元素为 flexible box，也可以置</span> {{cssxref("display")}} 属性的值为 <code>inline-flex。</code></p> +</div> + +<h2 id="flex_模型说明">flex 模型说明</h2> + +<p>当元素表现为 flex 框时，它们沿着两个轴来布局：</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li><strong>主轴（main axis）</strong>是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为<strong> main start</strong> 和<strong> main end</strong>。</li> + <li><strong>交叉轴（cross axis）</strong>是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 <strong>cross start</strong> 和<strong> cross end</strong>。</li> + <li>设置了 <code>display: flex</code> 的父元素（在本例中是 {{htmlelement("section")}}）被称之为 <strong>flex 容器（flex container）。</strong></li> + <li>在 flex 容器中表现为柔性的盒子的元素被称之为 <strong>flex 项</strong>（<strong>flex item</strong>）（本例中是 {{htmlelement("article")}} 元素。</li> +</ul> + +<p>了解这些术语以便你阅读后续章节。 如果您对使用的任何术语感到困惑，您可以随时返回这里。</p> + +<h2 id="列还是行">列还是行?</h2> + +<p>弹性盒子提供了 {{cssxref("flex-direction")}} 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 <code>row</code>，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。</p> + +<p>尝试将以下声明添加到 section 元素的 css 规则里：</p> + +<pre class="brush: css">flex-direction: column;</pre> + +<p>你会看到，这会将那些元素设置为列布局，就像我们添加这些 CSS 之前。在继续之前，请从示例中删除此规则。</p> + +<div class="note"> +<p><strong>注意：</strong>你还可以使用 <code>row-reverse </code>和 <code>column-reverse </code>值反向排列 flex 项目。用这些值试试看吧！</p> +</div> + +<h2 id="换行">换行</h2> + +<p>当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局。你可以看一下 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">弹性盒子-wrap0.html</a> 示例（你也可以拷贝到本地），如下所示：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>在这里我们看到，子代确实超出了它们的容器。 解决此问题的一种方法是将以下声明添加到 section css 规则中：</p> + +<pre class="brush: css">flex-wrap: wrap</pre> + +<p>同时，把以下规则也添加到{{htmlelement("article")}} 规则中：</p> + +<pre class="brush: css">flex: 200px;</pre> + +<p>现在尝试一下吧；你会看到布局比原来好多了：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">现在我们有了多行 弹性盒子— 任何溢出的元素将被移到下一行。在 article 元素上设置的 flex: 200px 规则，意味着每个元素的宽度至少是200px；我们将在后面更详细地讨论这个属性。你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。</p> + +<p>但是这里我们可以做得更多。首先，改变 {{cssxref("flex-direction")}} 属性值为 <code>row-reverse</code> — 你会看到仍然有多行布局，但是每一行元素排列的方向和原来是相反的了。</p> + +<h2 id="flex-flow_缩写">flex-flow 缩写</h2> + +<p>到这里，应当注意到存在着 {{cssxref("flex-direction")}} 和 {{cssxref("flex-wrap")}} — 的缩写 {{cssxref("flex-flow")}}。比如，你可以将</p> + +<pre class="brush: css">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>替换为</p> + +<pre class="brush: css">flex-flow: row wrap;</pre> + +<h2 id="flex_项的动态尺寸">flex 项的动态尺寸</h2> + +<p>现在让我们回到第一个例子，看看是如何控制 flex 项占用空间的比例的。打开你本地的 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">弹性盒子0.html</a>，或者拷贝 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">弹性盒子1.html</a> 作为新的开始（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">查看线上</a>）。</p> + +<p>第一步，将以下规则添加到 CSS 的底部：</p> + +<pre class="brush: css">article { + flex: 1; +}</pre> + +<p>这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。本例中，我们设置 {{htmlelement("article")}} 元素的 flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。</p> + +<p>现在在上一个规则下添加：</p> + +<pre class="brush: css">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>现在当你刷新，你会看到第三个 {{htmlelement("article")}} 元素占用了两倍的可用宽度和剩下的一样 — 现在总共有四个比例单位可用。 前两个 flex 项各有一个，因此它们占用每个可用空间的1/4。 第三个有两个单位，所以它占用2/4或这说是1/2的可用空间。</p> + +<p>您还可以指定 flex 的最小值。 尝试修改现有的 article 规则：</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>这表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享“。 尝试刷新，你会看到分配空间的差别。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>弹性盒子的真正价值可以体现在它的灵活性/响应性，如果你调整浏览器窗口的大小，或者增加一个 {{htmlelement("article")}} 元素，这时的布局仍旧是好的。</p> + +<h2 id="flex_缩写与全写">flex: 缩写与全写</h2> + +<p>{{cssxref("flex")}} 是一个可以指定最多三个不同值的缩写属性：</p> + +<ul> + <li>第一个就是上面所讨论过的无单位比例。可以单独指定全写 {{cssxref("flex-grow")}} 属性的值。</li> + <li>第二个无单位比例 — {{cssxref("flex-shrink")}} — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。</li> + <li>第三个是上面讨论的最小值。可以单独指定全写 {{cssxref("flex-basis")}} 属性的值。</li> +</ul> + +<p>我们建议不要使用全写属性，除非你真的需要（比如要去覆盖之前写的）。使用全写会多写很多的代码，它们也可能有点让人困惑。</p> + +<h2 id="水平和垂直对齐">水平和垂直对齐</h2> + +<p>还可以使用 弹性盒子的功能让 flex 项沿主轴或交叉轴对齐。让我们一起看一下新例子 — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a>（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">在线浏览</a>）— 我们将会有一个整洁，灵活的按钮/工具栏。 此时，你看到了一个水平菜单栏，其中一些按钮卡在左上角，就像下面这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>首先，拷贝一份到本地。</p> + +<p>然后，将下面的 CSS 添加到例子的底部：</p> + +<pre class="brush: css">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p>刷新一下页面，你就会看到这些按钮很好的垂直水平居中了。我们是通过下面所说的两个新的属性做到的。</p> + +<p>{{cssxref("align-items")}} 控制 flex 项在交叉轴上的位置。</p> + +<ul> + <li>默认的值是 <code>stretch</code>，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。我们的第一个例子在默认情况下得到相等的高度的列的原因。</li> + <li>在上面规则中我们使用的 <code>center</code> 值会使这些项保持其原有的高度，但是会在交叉轴居中。这就是那些按钮垂直居中的原因。</li> + <li>你也可以设置诸如 <code>flex-start</code> 或 <code>flex-end</code> 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。查看 {{cssxref("align-items")}} 了解更多。</li> +</ul> + +<p>你可以用 {{cssxref("align-self")}} 属性覆盖 {{cssxref("align-items")}} 的行为。比如，你可以这样：</p> + +<pre class="brush: css">button:first-child { + align-self: flex-end; +}</pre> + +<p>去看看它产生的效果，然后删除它。</p> + +<p>{{cssxref("justify-content")}} 控制 flex 项在主轴上的位置。</p> + +<ul> + <li>默认值是 <code>flex-start</code>，这会使所有 flex 项都位于主轴的开始处。</li> + <li>你也可以用 <code>flex-end</code> 来让 flex 项到结尾处。</li> + <li><code>center</code> 在 <code>justify-content</code> 里也是可用的，可以让 flex 项在主轴居中。</li> + <li>而我们上面用到的值 <code>space-around</code> 是很有用的——它会使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。</li> + <li>还有一个值是 <code>space-between</code>，它和 <code>space-around</code> 非常相似，只是它不会在两端留下任何空间。</li> +</ul> + +<p>在继续下面之前，多多使用提到过的属性吧，看看它们的效果。</p> + +<h2 id="flex_项排序">flex 项排序</h2> + +<p>弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。</p> + +<p>代码也很简单，将下面的 CSS 添加到示例代码下面。</p> + +<pre class="brush: css">button:first-child { + order: 1; +}</pre> + +<p>刷新下，然后你会看到 "Smile" 按钮移动到了主轴的末尾。下面我们谈下它实现的一些细节：</p> + +<ul> + <li>所有 flex 项默认的 {{cssxref("order")}} 值是 0。</li> + <li>order 值大的 flex 项比 order 值小的在显示顺序中更靠后。</li> + <li>相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。</li> + <li>第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。</li> +</ul> + +<p>你也可以给 order 设置负值使它们比值为 0 的元素排得更前面。比如，你可以设置 "Blush" 按钮排在主轴的最前面：</p> + +<pre class="brush: css">button:last-child { + order: -1; +}</pre> + +<h2 id="flex_嵌套">flex 嵌套</h2> + +<p>弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。看一下 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-弹性盒子.html</a>（<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">在线浏览</a>）。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>这个例子的 HTML 是相当简单的。我们用一个 {{htmlelement("section")}} 元素包含了三个 {{htmlelement("article")}}元素。第三个 {{htmlelement("article")}} 元素包含了三个 {{htmlelement("div")}}：</p> + +<pre>section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>现在让我们看一下布局用到的代码。</p> + +<p>首先，我们设置 {{htmlelement("section")}} 的子节点布局为 flexible box。</p> + +<pre class="brush: css">section { + display: flex; +}</pre> + +<p>下面我们给 {{htmlelement("article")}} 元素设置 flex 值。特别注意这里的第二条CSS规则—我们设置第三个 {{htmlelement("article")}} 元素的子节点的布局同样为 flex ，但是属性值为列布局。</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>接下来，我们选择了第一个 {{htmlelement("div")}}。首先使用 <code>flex: 1 100px;</code> 简单的给它一个最小的高度 100px，然后设置它的子节点（{{htmlelement("button")}} 元素）为 flex 项。在这里我们将它们放在一个包装行(wrap row)中，使它们居中对齐，就像我们在前面看到的单个按钮示例中做的那样。 </p> + +<pre class="brush: css">article:nth-of-type(3) div:first-child { + flex: 1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>最后，我们给按钮设置大小，有意思的是我们给它一个值为1的 flex 属性。如果你调整浏览器窗口宽度，你会看到这是一个非常有趣的效果。按钮将尽可能占用最多的空间，尽可能多的堆在同一条线上，但是当它们不再适合在同一条线上，他们中的一些会到下一行去。</p> + +<pre class="brush: css">button { + flex: 1; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="跨浏览器兼容性">跨浏览器兼容性</h2> + +<p>大多数浏览器都支持 弹性盒子，诸如 Firefox, Chrome, Opera, Microsoft Edge 和 IE 11，较新版本的 Android/iOS 等等。但是你应该要意识到仍旧有被人使用的老浏览器不支持 弹性盒子（或者支持，但是只是支持非常非常老版本的 弹性盒子）。</p> + +<p>虽然你只是在学习和实验，这不太要紧; 然而，如果您正在考虑在真实网站中使用弹性盒子，则需要进行测试，并确保在尽可能多的浏览器中您的用户体验仍然可以接受。</p> + +<p>弹性盒子相较其他一些 CSS 特性可能更为棘手。 例如，如果浏览器缺少 CSS 阴影，则该网站可能仍然可用。 但是假如不支持 弹性盒子功能就会完全打破布局，使其不可用。</p> + +<p>我们将在未来的模块中讨论克服棘手的跨浏览器支持问题的策略。</p> + +<h2 id="测试你的技能">测试你的技能</h2> + +<p>我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识? 在你继续学习前，你可以进行<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">测试</a>来验证你是否掌握了这些知识。</p> + +<h2 id="总结">总结</h2> + +<p>到这里，介绍弹性盒子的基础知识就结束了。 我们希望你体会到乐趣，并且玩的开心，能随着你的学习与你一起向前。 接下来，我们将看到CSS布局的另一个重要方面—网格系统。</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> diff --git a/files/zh-cn/learn/css/css_layout/floats/index.html b/files/zh-cn/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..80e50f515e --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/floats/index.html @@ -0,0 +1,550 @@ +--- +title: 浮动 +slug: Learn/CSS/CSS_layout/Floats +tags: + - CSS + - Guide + - 列 + - 初学者 + - 布局 + - 教程 + - 浮动 + - 清除 +translation_of: Learn/CSS/CSS_layout/Floats +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">{{cssxref("float")}} 属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用工具之一。本文将阐述它的有关知识。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">要求:</th> + <td>HTML基础知识(学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">入门 HTML</a>)，和CSS的工作理念（学习 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">入门 CSS</a>)。</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>学习如何创建浮动特性,比如首字下沉、浮动图像，和多个列在网页布局。</td> + </tr> + </tbody> +</table> + +<h2 id="浮动的背景知识">浮动的背景知识</h2> + +<p>最初，引入 {{cssxref("float")}} 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。</p> + +<p>但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。之前的 <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Active_learning_A_fancy_paragraph">fancy paragraph example</a> 的课程展示了如何使用浮动创建一个有趣的drop-cap（首字下沉）效果。</p> + +<p>浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作<a href="/zh-CN/docs/Learn/CSS/CSS_layout/传统的布局方法">传统的布局方法。</a></p> + +<p>在这一章中，我们仅就浮动这一命令本身的性能展开讲解。</p> + +<h2 id="简单的例子">简单的例子</h2> + +<p>让我们来探讨如何使用浮动。我们将从一个非常简单的例子开始，包括在图像周围浮动一个文本块。你可以跟随在你的电脑上创建新的 <code>index.html</code> 文件，以填充它 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a>, 以下代码插入它在适当的地方。底部的部分你可以看到一个它应该是什么样子的例子。</p> + +<p>首先,我们写一些简单的HTML——添加以下到HTML的{{htmlelement("body")}}内,删除之前{{htmlelement("body")}}里面的东西：</p> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf"> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> + +<p>现在将以下CSS应用到您的HTML (使用一个{{htmlelement("style")}} 元素或一个{{htmlelement("link")}} 到一个单独的 <code>.css </code>文件——你来选择)：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +}</pre> + +<p>如果你现在保存并刷新，你会看到和你预期的效果差不多——图片坐落在文本的上方，目前看起来有点丑陋。我们本可以让图片在它的容器内居中，但取而代之，我们将使用float来让图片周围的文本浮起来。将以下规则添加到你之前的规则下面：</p> + +<pre class="brush: css notranslate">img { + float: left; + margin-right: 30px; +}</pre> + +<p>现在，如果您保存和刷新，你会看到类似下面的东西：</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf"> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +img { + float: left; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 800) }}</p> + +<p>因此，让我们考虑一下浮动是如何工作的——浮动元素 (这个例子中的{{htmlelement("img")}} 元素)会脱离正常的文档布局流，并吸附到其父容器的左边 (这个例子中的{{htmlelement("body")}}元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。</p> + +<p>注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右侧的文字紧贴着图片。</p> + +<p>向右浮动的内容是一样的效果，只是反过来了——浮动元素会吸附到右边，而其他内容将从左侧环绕它。尝试将上一个例子中的浮动值改为 <code>right</code> ，再把 <code>margin-right</code> 换成 <code>margin-left</code> ，看看结果是什么。</p> + +<h2 id="再看我们的首字下沉例子">再看我们的首字下沉例子</h2> + +<p>如上所述，我们的 <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Active_learning_A_fancy_paragraph">fancy paragraph example</a> 从早先的课程精选了一个漂亮的首字下沉。在这个例子中,我们有一个简单的段落：</p> + +<pre class="brush: html notranslate"><p>This is my very important paragraph. + I am a distinguished gentleman of such renown that my paragraph + needs to be styled in a manner befitting my majesty. Bow before +my splendour, dear students, and go forth and learn CSS!</p></pre> + +<p>我们的CSS看起来像这样：</p> + +<pre class="brush: css notranslate">p { + width: 400px; + margin: 0 auto; +} + +p::first-line { + text-transform: uppercase; +} + +p::first-letter { + font-size: 3em; + border: 1px solid black; + background: red; + float: left; + padding: 2px; + margin-right: 4px; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('再看我们的首字下沉例子', '100%', 130) }}</p> + +<p>这里的效果与我们在图像的第一个例子中所做的没有很大的不同，但是这一次，我们在信中的第一个字母后面的其余部分是浮动的，在使这封信看起来显得又大又大胆又有趣之后。</p> + +<p>你可以漂浮任何的东西，只要有两个项目的空间，以配合在一起。这使我们很好地谈论多列布局。</p> + +<h2 id="多列浮动布局">多列浮动布局</h2> + +<p>浮动通常用于创建多个列布局，并且由于其广泛的浏览器支持已经有相当一段时间。尽管事实上，他们不是真的打算这个工作，并有一些奇怪的副作用必须处理，你会在后面的文章中看到。</p> + +<h3 id="两列布局">两列布局</h3> + +<p>让我们先从最简单的例子——两列布局。您可以通过创建一个新的 <code>index.html</code> 文件在您的计算机上，用<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a>填充它, 并在适当的地方插入下面的代码。在本节的底部，您可以看到一个活的例子，最终代码应该看起来像。</p> + +<p>首先，我们需要一些内容放入我们的列。使用以下内容替换body中的任何内容：</p> + +<pre class="brush: html notranslate"><h1>2 column layout example</h1> +<div> + <h2>First column</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> + +<p>每个列都需要一个外部元素来包含其内容，并让我们一次操作它的所有内容。在这个例子中，我们选择了{{htmlelement("div")}}，但你可以选择更多语义合适的东西{{htmlelement("article")}}、{{htmlelement("section")}}、和{{htmlelement("aside")}}，诸如此类。</p> + +<p>现在为CSS将以下内容应用到HTML以提供一些基本设置：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +}</pre> + +<p>在宽度达到900px之前，整个视图的宽度将达到90%，在超过900px后，它将保持在这个宽度，并在视口中居中。默认情况下，子元素(这个{{htmlelement("h1")}} 和两个 {{htmlelement("div")}})将跨越整个body宽度的100%。如果我们希望将两个{{htmlelement("div")}}放在一起，那么我们需要将它们的宽度设置为父元素的宽度的100%，或者更小，这样它们就可以彼此匹配。将下面的内容添加到CSS的底部：</p> + +<pre class="brush: css notranslate">div:nth-of-type(1) { + width: 48%; +} + +div:nth-of-type(2) { + width: 48%; +}</pre> + +<p>在这里我们设置了他们的父亲的宽度的48％ —— 这总计96％，留下我们4％自由作为两列之间的沟槽，给内容一些空间呼吸。现在我们只需要浮动列，像这样：</p> + +<pre class="brush: css notranslate">div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +}</pre> + +<p>把这些结合在一起应该跟我们结果一样：</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h1>2 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 520) }}</p> + +<p>你会注意到，我们所有列使用宽度百分比——这是一个很好的策略，因为它创建一个流式布局（<strong>liquid layout</strong>），一种调整为不同的屏幕尺寸，并在较小的屏幕尺寸下保持相同的列宽度比例。请尝试调整浏览器窗口的宽度，以便自己查看。这是响应式网页设计的一个有价值的工具，我们将在以后的模块中讨论。</p> + +<div class="note"> +<p><strong>注意：</strong>你可以看到这个例子运行在 <a href="https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">the source code</a>).</p> +</div> + +<p>需要注意的一件事是，当它们变得非常窄时，列就会变得很糟糕。切换回窄屏幕的单列布局通常是有意义的（如手机)，使用媒体查询可以实现这一功能。再一次，你们将在未来的响应式网页设计模块中学习这些知识。</p> + +<p>另一种选择是将宽度设置为一个固定的单位如rem或像素——你可以看到一个例子<code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/two-column-layout-fixed.html">two-column-layout-fixed.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/two-column-layout-fixed.html">see source code</a>)，或者通过删除<code>max-width</code> 声明来转换您自己的示例，并改变各个宽度为 <code>900px</code>, <code>430px</code>和 <code>430px</code>。这就是<strong>固定宽度布局</strong>（<strong>fixed-width layout</strong>）——如果您现在调整浏览器大小，您将看到布局不再调整以适应视图宽度，在尺寸更小时您将需要滚动来查看它的全部。</p> + +<p>现在我们将转去使用流体布局。</p> + +<h3 id="三列布局">三列布局</h3> + +<p>你已经有了一个两列布局工作，添加一个第三列(或更多)并不是太难。你只需要添加另一个列在同一个父元素。开始通过添加以下 {{htmlelement("div")}}就在另外两个后面(或使用 <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a></code> 作为开始）：</p> + +<pre class="brush: html notranslate"><div> + <h2>Third column</h2> + <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p> +</div></pre> + +<p>现在更新你的CSS如下：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 36%; + float: left; +} + +div:nth-of-type(2) { + width: 30%; + float: left; + margin-left: 4%; +} + +div:nth-of-type(3) { + width: 26%; + float: right; +}</pre> + +<p>这将给我们以下结果：</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h1>3 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> + +<div> + <h2>Third column</h2> + <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p> +</div> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 36%; + float: left; +} + +div:nth-of-type(2) { + width: 30%; + float: left; + margin-left: 4%; +} + +div:nth-of-type(3) { + width: 26%; + float: right; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', '100%', 800) }}</p> + +<p>这个例子我们已经很熟悉了；唯一真正的区别是我们有了这个额外的列——为了让它放到合适的位置我们已经把它放在左边了；我们还给了它一个4%的 {{cssxref("margin-left")}}，来在第一和第二列之间拉开一段距离。我们设置了列的宽度以便它们都能匹配——36% + 30% + 4% + 26% = 96%，在第二和第三列之间有4%的空间。（这个空间总是出现在向左浮动的第二列和向右浮动的第三列之间。）</p> + +<p>这里需要注意的一点是，您必须仔细考虑将列放在什么位置，以及如何浮动它们，以获得所需的结果。你的内容应该是有意义的，当你阅读它的源代码和它的视觉布局的时候；但是，使用浮动可以使可视化布局与源顺序不同。来说明我们的意思，尝试改变第二列的 {{cssxref("float")}}值为 <code>right</code> （或者看一看<a href="https://mdn.github.io/learning-area/css/css-layout/floats/three-column-layout-wrong-order.html">three-column-layout-wrong-order.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/three-column-layout-wrong-order.html">源码</a>)）你会看到现在的视觉顺序是这样的：</p> + +<pre class="notranslate">div1 div3 div2</pre> + +<p>这是因为第二个<div>源代码顺序上比第三个<div>等级要高 (DOM上第二个<div>先出现并声明了<code>float: right;</code>) ，所以在浮动顺序上也会比第三个<div>等级要高。又因为两者同时像右浮动，第二个<div>就会更加地靠右。</p> + +<p>然而视觉受损的人使用屏幕阅读器来听你的内容，仍然会听到这个顺序的内容：</p> + +<pre class="notranslate"><code>div1 div2 div3</code></pre> + +<p>内容布局和样式对它们没有影响。无论用户如何消费，内容都应该是合理的。</p> + +<div class="note"> +<p><strong>注意：</strong>完成了这一点您可以找到的例子<a href="https://mdn.github.io/learning-area/css/css-layout/floats/1_three-column-layout.html">1_three-column-layout.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/1_three-column-layout.html">see source code</a>).</p> +</div> + +<h2 id="清除浮动">清除浮动</h2> + +<p>现在你已经知道了关于 float 属性的一些有趣事实，不过你很快就能够碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。为了说明我们的意思，尝试在第三个{{htmlelement("div")}} 元素下面添加以下HTML（并检出<code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/2_float-disaster.html">2_float-disaster.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/2_float-disaster.html">source code</a>)）：</p> + +<pre class="brush: html notranslate"><footer> + <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p> +</footer></pre> + +<p>你会看到页脚在最长的列旁边环绕着，这看起来很糟糕——我们希望页脚保持在底部，在所有的列下面。幸运的是，有一种简单的方法可以解决这个问题—— {{cssxref("clear")}} 属性。当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的{{cssxref("float")}}声明应用到此后的另一个元素。</p> + +<p>所以，要解决我们的问题，添加以下规则到您的CSS：</p> + +<pre class="brush: css notranslate">footer { + clear: both; +}</pre> + +<p>这将会给你一个页脚，它会在你的列下面，就像它应该做的那样：</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code 4</h6> + +<pre class="brush: html notranslate"><h1>3 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> + +<div> + <h2>Third column</h2> + <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p> +</div> + +<footer> + <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p> +</footer> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 36%; + float: left; +} + +div:nth-of-type(2) { + width: 30%; + float: left; + margin-left: 4%; +} + +div:nth-of-type(3) { + width: 26%; + float: right; +} + +footer { + clear: both; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', '100%', 865) }}</p> + +<p>{{cssxref("clear")}} 可以取三个值：</p> + +<ul> + <li><code>left</code>：停止任何活动的左浮动</li> + <li><code>right</code>：停止任何活动的右浮动</li> + <li><code>both</code>：停止任何活动的左右浮动</li> +</ul> + +<p>你通常只想设定一个 <code>clear: both</code> 在你想让浮动停止的元素上。在某些情况下，你会想要只取消<code>left</code> 或 <code>right</code> 引用。</p> + +<div class="note"> +<p><strong>注：</strong>你可以在这个阶段找到例子 <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/2a_fixed-by-clear.html">2a_fixed-by-clear.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/2a_fixed-by-clear.html">see source code</a>).</p> +</div> + +<h2 id="浮动问题">浮动问题</h2> + +<p>以上部分提供了使用浮动创建简单布局的基础，但是还有一些问题需要解决。 让我们谈谈这些问题。</p> + +<h3 id="整个宽度可能难以计算">整个宽度可能难以计算</h3> + +<p>到目前为止，我们的例子是没有应用样式的浮动框——这很容易。当你开始给这些框加上样式时，比如添加背景、外边距、内边距等等，问题就来了。为了演示这个问题，可以将下面的 CSS 加入到你的代码里 (你也可以看这个例子 <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/3_broken-layout.html">3_broken-layout.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/3_broken-layout.html">source code</a>))：</p> + +<pre class="brush: css notranslate">div, footer { + padding: 1%; + border: 2px solid black; + background-color: red; +}</pre> + +<p>此时，您将看到您的布局已损坏 —— 由于内边距和边界引入的额外宽度，一行容纳不下三列了，因此第三列下降到另外两列之下。</p> + +<p>有两个方法可以解决问题，最好的方法是给你的html加上下面的css。</p> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +}</pre> + +<p>{{cssxref("box-sizing")}} 通过更改盒模型来拯救我们，盒子的宽度取值为 content + padding + border，而不仅是之前的content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。</p> + +<p>我们有另一个问题——页脚正压在最长列上， 在这一点并不理想——我们来试着清除页脚浮动的同时给出一些顶部外边距（ <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top" title="The margin-top CSS property sets the margin area on the top of an element. A positive value will place it farther than normal from its neighbors, while a negative value will place it closer."><code>margin-top</code></a> ）来解决这个问题：</p> + +<pre class="brush: css notranslate">footer { + clear: both; + margin-top: 4%; +} </pre> + +<p>然而，这不起作用 ——浮动的元素存在于正常的文档布局流之外，在某些方面的行为相当奇怪：</p> + +<ul> + <li>首先，他们在父元素中所占的面积的有效高度为0 ——尝试在浏览器中加载 <a href="https://mdn.github.io/learning-area/css/css-layout/floats/1_three-column-layout.html">1_three-column-layout.html</a> 并用开发工具查看 {{htmlelement("body")}} 的高度，你将会看到我们的意思是什么——所报告的正文高度只有 {{htmlelement("h1")}} 的高度 。这个可以通过很多方式解决，但是我们所依赖的是在父容器的底部清除浮动，如我们在我们的当前示例所做的那样。 如果检查当前示例中正文的高度，您应该看它的高度是行为本身。</li> + <li>其次，非浮动元素的外边距不能用于它们和浮动元素之间来创建空间——这是我们在这里眼前的问题，我们将在下面实施修复。</li> + <li>还有一些关于浮动的奇怪的事情——Chris Coyier优秀的<a href="https://css-tricks.com/all-about-floats/">关于Floats</a>文章概述了其他一些以及修复这些。</li> +</ul> + +<p>所以，让我们解决这个！ 首先，在HTML的代码里添加新的{{htmlelement("div")}} 元素，位于在<footer>标签的上方：</p> + +<pre class="brush: html notranslate"><div class="clearfix"></div></pre> + +<p>如果您没有一个可用的元素来清除您的浮动(比如我们的页脚)，在您想要清除的浮动之后添加一个看不见的“clearfix div”是非常有用的，但是在这里页脚也要用到。接下来我们要做的是，移除页脚样式规则中的 <code>clear: both;</code> 声明，取而代之将其放在clearfix div中：</p> + +<pre class="brush: css notranslate">.clearfix { + clear: both; +}</pre> + +<p>我们的页脚现在有一个很好的顶部外边距，但也有另一个问题——clearfix div 背景、内边距和边界与我们的列和页脚相同！为了解决这个问题，让我们先给每个列块一个类（ <code>class</code> ）<code>column</code>：</p> + +<pre class="brush: html notranslate"><div class="column"> + ... +</div></pre> + +<p> 现在让我们改变应用盒子样式的规则到这些块和页脚，这样只有列块被样式化：</p> + +<pre class="brush: css notranslate">.column, footer { + padding: 1%; + border: 2px solid black; + background-color: red; +}</pre> + +<p>至此，修复问题大概就那样。</p> + +<div class="note"> +<p><strong>注：</strong> 查看在这个阶段最后一个解决的例子<a href="https://mdn.github.io/learning-area/css/css-layout/floats/4_fixed-layout-border-box.html">4_fixed-layout-border-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/4_fixed-layout-border-box.html">source code</a>)。</p> +</div> + +<p>这里要注意的另一小点是，<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" title="The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements."><code>box-sizing</code></a> 出现可以追溯到Internet Explorer 8——如果您明确需要支持较老的浏览器，您可能需要手动调整列的宽度，以允许内边距和边界宽度。这不是一种非常精确的技术，特别是考虑到你不能用百分比来确定边界——你只需要在尽可能充满父宽度的同时留出足够的空间。你可以看到这样的实战修复<code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/fixed-layout-adjusted-percentages.html">fixed-layout-adjusted-percentages.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/fixed-layout-adjusted-percentages.html">见源代码</a>)。</p> + +<h3 id="浮动项目的背景高度">浮动项目的背景高度</h3> + +<p>到目前为止，我们建好的示例是有效的，但另一个问题是列高度是不同的—— 如果列都是相同的高度，它看起来会更好。</p> + +<p>我们可以通过给所有的列固定{{cssxref("height")}} 来解决这个问题(see <code><a href="https://mdn.github.io/learning-area/css/css-layout/floats/5_fixed-height-columns.html">5_fixed-height-columns.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/5_fixed-height-columns.html">源代码</a>)：</p> + +<pre class="brush: css notranslate">.column { + height: 550px; +}</pre> + +<p>然而在许多情况下这并不理想——它使设计呆板。如果你能保证列中总是有相同数量的内容，这是可以的，但这并不总是如此——在很多类型的网站上，内容也会定期更改。</p> + +<p>这正是像flexbox这样的新布局技术所解决的问题。Flexbox可以自动地延长列，这样他们就会像最长的一列一样。</p> + +<p>你也可以考虑：</p> + +<ol> + <li>将这些列的背景颜色设置为父元素的背景颜色，这样您就不会看到高度是不同的。这是目前最好的选择。</li> + <li>将它们设置为固定的高度，并使内容滚动{{cssxref("overflow")}} (参见我们溢流部分的示例。)</li> + <li>使用一种叫做伪列（faux columns）的技术——这包括将背景(和边界)从实际的列中提取出来，并在列的父元素上画一个伪造的背景，看起来像列的背景一样。不幸的是，这将无法处理列边界。 详见对于<a href="http://alistapart.com/article/fauxcolumns">伪列</a>和<a href="https://www.addedbytes.com/blog/code/faux-columns-for-liquid-layouts/">伪列流体布局</a>的教程。</li> +</ol> + +<h3 id="清除浮动会变复杂">清除浮动会变复杂</h3> + +<p>我们在文章中建立的简单例子很容易理解，但是当布局变得更加复杂清理（clearing）也会变得更加复杂。你需要确保所有的浮动都能尽快清除，以避免它们给下方的内容制造麻烦。如果您没有一个方便的容器来进行清理，那么在必要的时候使用clearfix块。</p> + +<h2 id="纸上得来终觉浅！">纸上得来终觉浅！</h2> + +<p>你已经读完了这一篇文章，但是你还记得几成呢？在继续阅读之前你可以在这里找到一些测试来检验一下：<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats_skills">Test your skills: Floats</a>.</p> + +<h2 id="总结">总结</h2> + +<p>现在，您应该已经拥有了一些强大的工具来创建相当复杂的web布局。太好了!在下一篇文章中，我们将进一步研究定位。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html new file mode 100644 index 0000000000..bd0ea5662f --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -0,0 +1,70 @@ +--- +title: Fundamental Layout Comprehension +slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">如果您已经完成了这个模块的学习，那么您将已经学习了今天进行CSS布局以及使用旧的CSS所需的基本知识。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">任务需知:</th> + <td> + <p>在尝试此评估之前，您应该已经阅读了本模块中的所有文章。</p> + </td> + </tr> + <tr> + <th scope="row">任务目标:</th> + <td> + <p>测试您对本单元所涵盖的基本布局技能的理解与掌握应用。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="项目简介">项目简介</h2> + +<p>我们已经为你提供了一些原始的html、基本的css文件和图像——现在你需要设计一个跟下面图片相似的布局页面。<img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p> + +<h3 id="基本步骤">基本步骤</h3> + +<p>你可以在这下载基本的html css和图片素材 <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">here</a>.</p> + +<p>将HTML文档和css保存到你自己计算机的目录中，并将图像添加到名为images的文件夹中，在浏览器中打开index.html文件应该会给您提供一个具有基本样式但没有布局的页面，该页面应该类似下面所示的图像。</p> + +<p>此页面开始于浏览器在正常流中显示的布局的所有内容。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p> + +<h3 id="目标">目标</h3> + +<p>你需要实现你自己的布局。下面是你应该完成的目标：</p> + +<ol> + <li>在一行中显示导航选项，并且选项之间拥有相同的空间。</li> + <li>导航条应随着内容一起滚动并且在触碰到视口顶部之后于顶部固定。</li> + <li>文章内的图片应该被文本包围。</li> + <li>{{htmlelement("article")}} 与 {{htmlelement("aside")}} 元素应该为双列布局。它们的列尺寸应该是弹性的，以便在浏览器窗口收缩得更小的时候能够变窄。</li> + <li>照片应该以有 1px 间隔的两列网格显示出来。</li> +</ol> + +<p>在实现布局的过程中你不需要修改 HTML，下面是你应该使用的技术：</p> + +<ul> + <li>Positioning</li> + <li>Float</li> + <li>Flexbox</li> + <li>CSS Grid Layout</li> +</ul> + +<p>你能够用好几种方法来实现这些目标，完成一件事的方法并不只有一个。尝试不同的方式，并且看看哪个最有效。尝试之后写下笔记，你可以在本练习的帖子中或者 <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC 频道讨论你实现它们的方式。</p> + +<h2 id="评估">评估</h2> + +<p> </p> + +<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a> 或 <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> 的 <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p> + +<p> </p> diff --git a/files/zh-cn/learn/css/css_layout/grid_skills/index.html b/files/zh-cn/learn/css/css_layout/grid_skills/index.html new file mode 100644 index 0000000000..9379b24d92 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/grid_skills/index.html @@ -0,0 +1,96 @@ +--- +title: '测试你的技能: 网格布局' +slug: Learn/CSS/CSS_layout/Grid_skills +translation_of: Learn/CSS/CSS_layout/Grid_skills +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>此任务的目的是让你使用CSS网格布局，并测试你是否了解网格和网格项的行为方式。 你将会完成三个包括不同的元素小任务。</p> + +<div class="blockIndicator note"> +<p><strong>提示</strong>: 您可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具(如CodePen、jsFiddle或Glitch)处理这些任务可能会更有帮助。<br> + <br> + 如果您遇到困难，请向我们寻求帮助 — 参阅本页底部的 {{anch("评估或进一步帮助")}} 部分。</p> +</div> + +<h2 id="网格布局（一）">网格布局（一）</h2> + +<p>在此任务中，你需要创建一个网格，要求其中的四个子元素能自动排布。网格内要有三列并且将可用空间等分，列和行的间距均为20px。</p> + +<p>在三列网格布局中有四个物体放入其中。</p> + +<p>尝试更新下面的实时代码以复现上面的示例:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p>评估或进一步的工作目的, 可以<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid1-download.html">下载此任务的源文件</a>在你自己的编辑器或在线编辑器工作。</p> +</div> + +<h2 id="网格布局_二">网格布局 二</h2> + +<p>In this example we already have a grid defined. By editing the CSS rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below.</p> + +<p><img alt="A box with two items inside one overlaying the other." src="https://mdn.mozillademos.org/files/17067/grid-task2.png" style="height: 589px; width: 1264px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 800)}}</p> + +<p>Additional questions:</p> + +<ul> + <li>Can you now cause the first item to display on top without changing the order of items in the source?</li> +</ul> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid2-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Grid_Layout_Three">Grid Layout Three</h2> + +<p>There are four direct children in this grid; the starting point has them displayed using auto-placement. Use the grid-area and grid-template-areas properties to lay the items out as shown in the image.</p> + +<p><img alt="Four items displayed in a grid." src="https://mdn.mozillademos.org/files/17068/grid-task3.png" style="height: 375px; width: 1269px;"></p> + +<p>Try updating the live code below to recreate the finished example:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Grid_and_Flex_Layout_4">Grid and Flex Layout 4</h2> + +<p>You will need to use both Grid Layout and Flexbox to recreate the example as seen in the image. You do not need to make any changes to the HTML in order to do this.</p> + +<p><img alt="Two rows of cards, each with an image and a set of tags." src="https://mdn.mozillademos.org/files/17079/grid-task4.png" style="height: 1158px; width: 1428px;"></p> + +<p>Try updating the code below to create your example: </p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 1200)}}</p> + +<div class="blockIndicator note"> +<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you'd like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Grid layout 1 skill test".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/css_layout/grids/index.html b/files/zh-cn/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..eca25a84b8 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/grids/index.html @@ -0,0 +1,1308 @@ +--- +title: 网格 +slug: Learn/CSS/CSS_layout/Grids +tags: + - CSS + - CSS网格 + - 初学者 + - 学习 + - 布局 + - 引导 + - 教程 + - 文章 + - 编码脚本 + - 网格 + - 网格框架 + - 网格设计 +translation_of: Learn/CSS/CSS_layout/Grids +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">CSS网格是一个用于web的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版，这篇文章包含了你需要的一切知识。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>HTML基础 (学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML简介</a>)，以及了解CSS如何工作的(学习 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS简介</a> 和 <a href="/zh-CN/docs/Learn/CSS/Styling_boxes">盒子样式</a>。)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>要了解网格布局系统背后的基本概念，以及如何在一个网页上实现一个网格布局。</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>译者注：本篇中旧版教程主要讲如何自己编写网格布局，最后过渡到浏览器支持的 CSS Grid Layout。而当前（2019-04-29）大多数浏览器已经支持了 CSS Grid Layout，没必要自己编写了，新版教程仅介绍 CSS Grid Layout 的用法</strong></p> +</div> + +<h2 id="什么是网格布局？">什么是网格布局？</h2> + +<p>网格是由一系列水平及垂直的线构成的以一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。</p> + +<p>一个网格通常具有许多的<strong>列（column）</strong>与<strong>行（row）</strong>，以及行与行、列与列之间的间隙，这个间隙一般被称为<strong>沟槽（gutter）</strong>。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p> + +<p>[临时图； 将很快替换更好的图片。]</p> + +<div class="note"> +<p><strong>注意</strong>：任何有设计背景的人似乎都感到惊讶，CSS没有内置的网格系统，而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，但是你可能需要知道在未来一段时间内创建网格的现有方法。</p> +</div> + +<h2 id="在CSS中创建自己的网格">在CSS中创建自己的网格</h2> + +<p>决定好你的设计所需要的网格后，你可以创建一个CSS网格版面并放入各类元素。我们先来看看网格的基础功能，然后尝试做一个简单的网格系统。</p> + +<p>下面这个视频提供了一个很好的解释：</p> + +<p>{{EmbedYouTube("KOvGeFUHAC0")}}</p> + +<h3 id="定义一个网格">定义一个网格</h3> + +<p>一如既往，你可以下载教程<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">文件</a>（你可以在线看到<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">效果</a>）。例子中有一个容器，容器中有一些子项。默认情况下，子项按照正常布局流自顶而下排布。在这篇文章中，我们会从这开始，对这些文件做一些改变，来了解网格是如何工作的。</p> + +<p>首先，将容器的{{cssxref("display")}}属性设置为<code>grid</code>来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。把下面的css规则加到你的文件中。</p> + +<pre class="notranslate">.container { + display: grid; +} +</pre> + +<p>与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。因为<code>display: grid</code>的声明只创建了一个只有一列的网格，所以你的子项还是会像正常布局流那样从上而下一个接一个的排布。</p> + +<p>为了让我们的容器看起来更像一个网格，我们要给刚定义的网格加一些列。那就让我们加三个宽度为<code>200px</code>的列。当然，这里可以用任何长度单位，包括百分比。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +}</pre> + +<p>在规则里加入你的第二个声明。刷新页面后，你会看到子项们排进了新定义的网格中。</p> + +<div class="hidden"> +<h6 id="简单的网格示例">简单的网格示例 </h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +} </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> + +<h3 id="使用fr单位的灵活网格">使用fr单位的灵活网格</h3> + +<p>除了长度和百分比，我们也可以用<code>fr</code>这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例，可能有点抽像，看看下面的例子吧。</p> + +<p>使用下面的规则来创建3个<code>1fr</code>的列：</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +}</pre> + +<p>将窗口调窄（由于示例中设定了{{cssxref("max-width")}}，可能需要很窄），你应该能看到每一列的宽度可以会随着可用空间变小而变小。<code>fr</code> 单位按比例划分了可用空间，如果没有理解，可以试着改一下数值，看看会发生什么，比如下面的代码：</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +}</pre> + +<p>这个定义里，第一列被分配了<code>2fr</code>可用空间，余下的两列各被分配了<code>1fr</code>的可用空间，这会使得第一列的宽度是第二第三列的两倍。另外，<code>fr</code>可以与一般的长度单位混合使用，比如<code>grid-template-columns: 300px 2fr 1fr</code>，那么第一列宽度是<code>300px</code>，剩下的两列会根据除去<code>300px</code>后的可用空间按比例分配。</p> + +<div class="hidden"> +<h6 id="使用了fr单位的简单网格示例">使用了fr单位的简单网格示例</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>fr</code>单位分配的是<em>可用</em>空间而非<em>所有</em>空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。</p> +</div> + +<h3 id="网格间隙">网格间隙</h3> + +<p>使用 {{cssxref("grid-column-gap")}} 属性来定义列间隙；使用 {{cssxref("grid-row-gap")}} 来定义行间隙；使用 {{cssxref("grid-gap")}} 可以同时设定两者。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +}</pre> + +<p>间隙距离可以用任何长度单位包括百分比来表示，但不能使用<code>fr</code>单位。</p> + +<div class="hidden"> +<h6 id="添加了间隙的简单网格示例">添加了间隙的简单网格示例</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>*gap</code>属性曾经有一个<code>grid-</code>前缀，不过后来的标准进行了修改，目的是让他们能够在不同的布局方法中都能起作用。尽管现在这个前缀不会影响语义，但为了代码的健壮性，你可以把两个属性都写上。</p> +</div> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; + gap: 20px; +}</pre> + +<h3 id="重复构建行列">重复构建行/列</h3> + +<p>你可以使用<code>repeat</code>来重复构建具有某些宽度配置的某些列。举个例子，如果要创建多个等宽轨道，可以用下面的方法。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +}</pre> + +<p>和之前一样，你仍然得到了3个<code>1fr</code>的列。第一个传入repeat函数的值（<code>3</code>）表明了后续列宽的配置要重复多少次，而第二个值（<code>1fr</code>）表示需要重复的构建配置，这个配置可以具有多个长度设定。例如<code>repeat(2, 2fr 1fr)</code>，如果你仍然不明白，可以实际测试一下效果，这相当于填入了<code>2fr 1fr 2fr 1fr</code>。</p> + +<h3 id="显式网格与隐式网格">显式网格与隐式网格</h3> + +<p>到目前为止，我们定义过了列，但还没有管过行。但在这之前，我们要来理解一下显式网格和隐式网格。显式网格是我们用<code>grid-template-columns</code> 或 <code>grid-template-rows</code> 属性创建的。而隐式网格则是当有内容被放到网格外时才会生成的。显式网格与隐式网格的关系与弹性盒子的main和cross轴的关系有些类似。</p> + +<p>隐式网格中生成的行/列大小是参数默认是<code>auto</code>，大小会根据放入的内容自动调整。当然，你也可以使用{{cssxref("grid-auto-rows")}}和{{cssxref("grid-auto-columns")}}属性手动设定隐式网格的大小。下面的例子将<code>grid-auto-rows</code>设为了<code>100px</code>，然后你可以看到那些隐式网格中的行（因为这个例子里没有设定{{cssxref("grid-template-rows")}}，因此，所有行都位于隐式网格内）现在都是100像素高了。</p> + +<p>译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。</p> + +<div class="hidden"> +<h6 id="修改隐式网格尺寸的示例">修改隐式网格尺寸的示例</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> + </pre> +</div> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + grid-gap: 20px; +}</pre> + +<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> + +<h3 id="方便的minmax_函数">方便的minmax() 函数</h3> + +<p>100像素高的行/列有时可能会不够用，因为时常会有比100像素高的内容加进去。所以，我们希望可以将其设定为至少100像素，而且可以跟随内容来自动拓展尺寸保证能容纳所有内容。显而易见，你很难知道网页上某个元素的尺寸在不同情况下会变成多少，一些额外的内容或者更大的字号就会导致许多能做到像素级精准的设计出现问题。所以，我们有了{{cssxref("minmax")}}函数。</p> + +<p>{{cssxref("minmax")}} 函数为一个行/列的尺寸设置了取值范围。比如设定为 <code>minmax(100px, auto)</code>，那么尺寸就至少为100像素，并且如果内容尺寸大于100像素则会根据内容自动调整。在这里试一下把 <code>grid-auto-rows</code> 属性设置为<code>minmax</code>函数。</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>如果所有网格内的内容均小于100像素，那么看起来不会有变化，但如果在某一项中放入很长的内容或者图片，你可以看到这个格子所在的哪一行的高度变成能刚好容纳内容的高度了。注意我们修改的是<code>grid-auto-rows</code> ，因此只会作用于隐式网格。当然，这一项属性也可以应用于显示网格，更多内容可以参考{{cssxref("minmax")}}页面。</p> + +<h3 id="自动使用多列填充">自动使用多列填充</h3> + +<p>现在来试试把学到的关于网格的一切，包括repeat与minmax函数，组合起来，来实现一个非常有用的功能。某些情况下，我们需要让网格自动创建很多列来填满整个容器。通过设置<code>grid-template-columns</code>属性，我们可以实现这个效果，不过这一次我们会用到{{cssxref("repeat")}}函数中的一个关键字<code>auto-fill</code>来替代确定的重复次数。而函数的第二个参数，我们使用{{cssxref("minmax")}}函数来设定一个行/列的最小值，以及最大值<code>1fr</code>。</p> + +<p>在你的文件中试试看，你也许可以用到以下的代码。</p> + +<div class="hidden"> +<h6 id="自动使用多列填充的网格">自动使用多列填充的网格</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> +</div> + +<pre class="notranslate">.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> + +<p>你应该能看到形成了一个包含了许多至少200像素宽的列的网格，将容器填满。随着容器宽度的改变，网格会自动根据容器宽度进行调整，每一列的宽度总是大于200像素，并且容器总会被列填满。（This works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks.）</p> + +<h2 id="基于线的元素放置">基于线的元素放置</h2> + +<p>在定义完了网格之后，我们要把元素放入网格中。我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。而对于阿拉伯语，第一条列分隔线在网格的最右边，因为阿拉伯文是从右往左书写的。</p> + +<p>我们根据这些分隔线来放置元素，通过以下属性来指定从那条线开始到哪条线结束。</p> + +<ul> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> +</ul> + +<p>这些属性的值均为分隔线序号，你也可以用以下缩写形式来同时指定开始与结束的线。</p> + +<ul> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-row")}}</li> +</ul> + +<p>注意开始与结束的线的序号要使用<code>/</code>符号分开。</p> + +<p>下载<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">这个文件</a>（或者查看<a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">在线预览</a>）。文件中已经定义了一个网格以及一篇简单的文章位于网格之外。你可以看到元素已经被自动放置到了我们创建的网格中。</p> + +<p>接下来，尝试用定义网格线的方法将所有元素放置到网格中。将以下规则加入到你的css的末尾：</p> + +<pre class="notranslate">header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +}</pre> + +<div class="hidden"> +<h6 id="基于线的元素放置_2">基于线的元素放置</h6> + +<pre class="notranslate"> body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; + } + + .container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; + } +header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} +</pre> + +<pre class="notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>你也可以用<code>-1</code>来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Glossary/Grid">隐式网格</a><code>-1</code>不一定能定位到最后一条分隔线。</p> +</div> + +<h2 id="使用grid-template-areas属性放置元素">使用grid-template-areas属性放置元素</h2> + +<p>另一种往网格放元素的方式是用{{cssxref("grid-template-areas")}}属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。</p> + +<p>将之前基于线的元素放置代码删除（或者重新下载一份新的文件），然后加入以下CSS规则：</p> + +<pre class="notranslate">.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<p>刷新页面，然后你应该能看到的元素会被放到与之前相同的地方，整个过程不需要我们指定任何分隔线序号。</p> + +<div class="hidden"> +<h6 id="基于线的元素放置_3">基于线的元素放置</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + +.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +} + </pre> + +<pre class="notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> + +<p><code>grid-template-areas</code>属性的使用规则如下：</p> + +<ul> + <li>你需要填满网格的每个格子</li> + <li>对于某个横跨多个格子的元素，重复写上那个元素<code>grid-area</code>属性定义的区域名字</li> + <li>所有名字只能出现在一个连续的区域，不能在不同的位置出现</li> + <li>一个连续的区域必须是一个矩形</li> + <li>使用<code>.</code>符号，让一个格子留空</li> +</ul> + +<p>你可以在文件中尽情发挥你的想象来测试各种网格排版，比如把页脚放在内容之下，或者把侧边栏一直延伸到最底。这种直观的元素放置方式很棒，你在CSS中看到的就是实际会出现的排版效果。</p> + +<h2 id="一个用CSS网格实现的网格排版框架">一个用CSS网格实现的网格排版框架</h2> + +<p>网格排版框架一般由12到16列的网格构成，你可以用CSS网格系统直接实现而不需要任何第三方的工具，毕竟这是标准定义好了的。</p> + +<p>下载这个<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">初始文件</a>，文件中包含了一个定义了12列网格的容器。文件中的一些内容我们曾在前两个示例中使用过，我们暂时可以先用基于线的元素放置模式来将我们的内容放到这个12列的网格中。</p> + +<pre class="notranslate">header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +}</pre> + +<div class="hidden"> +<h6 id="一个CSS网格系统">一个CSS网格系统</h6> + +<pre class="notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 20px; +} + +header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + </pre> + +<pre class="notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> + </pre> +</div> + +<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> + +<p>你可以使用<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>去查看页面中的网格线，你应该能看到这12列的网格是如何工作的。</p> + +<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png"></p> + +<h2 id="纸上得来终觉浅！">纸上得来终觉浅！</h2> + +<p>你已经读完了这篇教程，那你记住那些最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grid_skills">技能测试：网格</a>.</p> + +<h2 id="小结">小结</h2> + +<p>我们在这篇文章中接触了CSS网格版面的主要特性，你现在应该可以在你自己的设计中使用了。想深入了解这些内容，你可以读一读下面关于网格版面的文章，可以下面的推荐阅读里看到。</p> + +<h2 id="推荐阅读">推荐阅读</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS网格指南</a></li> + <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS网格检查器：检查的你的网格版面</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> + +<hr> +<div class="blockIndicator warning"> +<p>以下是旧版教程</p> +</div> + +<h2 id="在你的项目中使用“网格系统”">在你的项目中使用“网格系统”</h2> + +<p>为了确保整个网站或应用程序的一致性体验，从一开始就将其置于网格系统上，这意味着您不需要考虑某个元素相对于其他元素的宽度。您的选择限于“该元素将跨越多少个网格列”。</p> + +<p>您的“网格系统”可以简单地是在设计过程中使用常规网格所做的决策。如果你的设计开始于一个图形编辑应用，如Photoshop的话，你可以参考这篇文章中所描述的过程创建一个网格 <a href="http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">一个更好响应网页设计的Photoshop网格</a>由<a href="http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">艾利特杰伊</a>提供。</p> + +<p>您的网格系统也可能是一个框架—— 无论是由第三方还是您为您自己的的项目创建的——通过CSS强制实现网格。</p> + +<h2 id="创建简单的网格框架">创建简单的网格框架</h2> + +<p>首先，看看我们将如何为你的项目创建一个简单的网格框架。</p> + +<p>目前大多数网格类型布局是使用浮动创建的。如果你阅读过<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats">我们前面关于浮动的文章</a>，你可以看到我们如何使用这种技术来创建一个多列布局——这是任何使用网格系统的本质方法。</p> + +<p>要创建的最简单的网格框架类型是固定宽度的 —— 我们只需要计算出想要设计的总宽度，想要多少列，以及沟槽和列的宽度。如果我们决定在具有列根据浏览器宽度增长和缩小的网格上布置设计，我们需要计算出列和沟槽之间的百分比宽度。</p> + +<p>在接下来的部分中，我们会讨论如何创建这两者。我们将创建一个12列网格 —— 一种很常见的选择，因为12可以被6、4、3和2整除，被认为非常适应不同的情况。</p> + +<h3 id="一个简单的定宽网格">一个简单的定宽网格</h3> + +<p>首先，创建一个使用固定宽度列的网格系统。</p> + +<p>制作本地样本<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a>的文件副本，该文件在其body中包含以下标记。</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div></pre> + +<p>第一行显示单个列的大小，第二行显示网格上一些不同大小的区域——目的是将其转换为12列上的两行演示网格。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> + +<p>为包装容器提供980像素的宽度，其右侧有20px的padding，这使总共列/沟槽宽度960像素——在这里，padding被整个content的宽度减去，因为我们将这里所有元素的{{cssxref("box-sizing")}}属性的值设置为 <code>border-box</code> (可以看 <a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> 有更详细的解释)。在<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style"><style></a>元素中，添加以下代码。</p> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + + +body { + width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 20px; +}</pre> + +<p>在网格的每一行的行容器从另一行中清除一行，在上一个规则下面添加以下规则：</p> + +<pre class="brush: css notranslate">.row { + clear: both; +}</pre> + +<p>此清除意味着我们不需要应用构成完整十二列的元素去填充每一行。行将保持分离，并且彼此不干扰。</p> + +<p>列之间的沟槽为20像素宽。我们在每列的左侧创建一个20px的外边距（margin）作为沟槽——包括第一列，以平衡容器右侧的填充的20像素。所以，我们共有12个沟槽 — 12×20 = 240。</p> + +<p>我们需要从960像素的总宽度中减去它，为列提供720像素。如果我们除以12，每列就应该是60像素宽。</p> + +<p>下一步是为<code>.col类</code>创建一个规则集，让它向左浮动，给它一个20像素的{{cssxref("margin-left")}}形成一个沟槽，一个60像素的 {{cssxref("width")}}。将以下规则添加到CSS的底部：</p> + +<pre class="brush: css notranslate">.col { + float: left; + margin-left: 20px; + width: 60px; + background: rgb(255, 150, 150); +}</pre> + +<p>现在，最上面一行的每一列将被整齐地排列为网格。</p> + +<div class="note"> +<p><strong>注意：</strong>我们还为每个列指定了一个浅红色，以便您可以准确地看到每个列占用多少空间。</p> +</div> + +<p>那些我们想要跨越多个列的布局容器需要被赋予特殊的类，来将它们的{{cssxref("width")}} 值调整到所需的列数（加上之间的沟槽）。我们需要创建一个额外的类，以允许容器跨越2到12列。每个宽度是将该列数的列宽加上沟槽宽度得到的结果，总是比列数少1。</p> + +<p>在CSS的底部添加以下内容：</p> + +<pre class="brush: css notranslate">/* Two column widths (120px) plus one gutter width (20px) */ +.col.span2 { width: 140px; } +/* Three column widths (180px) plus two gutter widths (40px) */ +.col.span3 { width: 220px; } +/* And so on... */ +.col.span4 { width: 300px; } +.col.span5 { width: 380px; } +.col.span6 { width: 460px; } +.col.span7 { width: 540px; } +.col.span8 { width: 620px; } +.col.span9 { width: 700px; } +.col.span10 { width: 780px; } +.col.span11 { width: 860px; } +.col.span12 { width: 940px; }</pre> + +<p>创建这些类后，我们现在可以在网格上布置不同的宽度列。尝试保存并在浏览器中加载页面以查看效果。</p> + +<div class="note"> +<p><strong>注意：</strong>如果您无法使上述示例工作，请尝试将其与我们在GitHub上<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">完成的版本</a>进行比较（也可以看<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">在线运行</a>）。</p> +</div> + +<p>尝试修改元素上的类，添加和删除一些容器，看看如何改变布局。例如，您可以使第二行如下所示：</p> + +<pre class="brush: css notranslate"><div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div></pre> + +<p>现在你有一个网格系统工作！你可以简单地定义行和每一行的列数，然后填充每个容器所需的内容。</p> + +<h3 id="创建流体网格">创建流体网格</h3> + +<p>我们的网格工作得很好，但它有一个固定的宽度。我们真的想要一个灵活（流体）网格，它将随着浏览器<a href="http://note.youdao.com/zh-CN/docs/Glossary/viewport">视口中</a>的可用空间而增长和缩小。为了实现这一点，我们可以使用参考像素宽度并将其转换为百分比。</p> + +<p>将固定的宽度变为基于百分比的灵活（flexible）宽度的公式如下。</p> + +<pre class="notranslate">target / context = result</pre> + +<p>对于列宽来说，<strong>上下文</strong>是一个960像素的包装器，<strong>目标的宽度</strong>是60像素，我们可以使用以下计算百分比。</p> + +<pre class="notranslate">60 / 960 = 0.0625</pre> + +<p>然后我们移动小数点2个位置，给出6.25％的百分比。因此，在我们的CSS中，我们可以替换60像素列宽度为6.25％。</p> + +<p>我们需要对沟槽宽度做同样的事情：</p> + +<pre class="notranslate">20 / 960 = 0.02083333333</pre> + +<p>因此，我们需要更换20像素<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-left">margin-left</a>在我们的.col规则和20像素<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding-right">padding-right</a>的.wrapper有2.08333333％。</p> + +<h4 id="更新网格">更新网格</h4> + +<p>要开始使用本部分，请制作您之前的示例页面的新副本，或者将我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>代码的本地副本用作起点。</p> + +<p>更新第二个CSS规则（使用.wrapper选择器）如下：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +}</pre> + +<p>不仅我们给了它一个百分比<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width">width</a>，我们还添加了一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width">max-width</a>属性，以阻止布局变得太宽。</p> + +<p>接下来，更新第四个CSS规则（使用.col选择器）如下：</p> + +<pre class="brush: css notranslate">.col { + float: left; + margin-left: 2.08333333%; + width: 6.25%; + background: rgb(255, 150, 150); +}</pre> + +<p>现在来看稍微更费力的部分 — 我们需要更新所有的 <code>.col.span </code>规则，使用百分比而不是像素宽度。这需要一点时间与计算器; 为了省你一些努力，我们已经为你做了下面。</p> + +<p>使用以下内容更新CSS规则的底部块：</p> + +<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +.col.span2 { width: 14.58333333%; } +/* Three column widths (18.75%) plus two gutter widths (4.1666666) */ +.col.span3 { width: 22.91666666%; } +/* And so on... */ +.col.span4 { width: 31.24999999%; } +.col.span5 { width: 39.58333332%; } +.col.span6 { width: 47.91666665%; } +.col.span7 { width: 56.24999998%; } +.col.span8 { width: 64.58333331%; } +.col.span9 { width: 72.91666664%; } +.col.span10 { width: 81.24999997%; } +.col.span11 { width: 89.5833333%; } +.col.span12 { width: 97.91666663%; }</pre> + +<p>现在保存您的代码，在浏览器中加载它，并尝试更改视口宽度 - 您应该看到列宽调整很好地适合！</p> + +<div class="note"> +<p><strong>注意：</strong>如果您无法使上述示例工作，请尝试将其与我们<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">在GitHub上完成的版本进行比较</a>（<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">请参见它</a>如何<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">运行</a>的）。</p> +</div> + +<h3 id="使用calc_函数更容易的计算">使用calc() 函数更容易的计算</h3> + +<p>你可以使用<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()">calc()</a>函数在你的CSS里面做数学 — 这允许你插入简单的数学方程到你的CSS值，计算一个值应该是什么。当需要执行复杂的数学运算时，它是特别有用的，甚至可以计算使用不同单位的计算，例如“我希望此元素的高度始终为父级高度的100％，减去50px”。<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">从MediaRecorder API教程中</a>查看<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">此示例</a>。</p> + +<p>无论如何，回到我们的网格！跨越网格的多个列的任何列具有6.25％的总宽度乘以跨越的列数加上2.08333333％乘以槽的数量（其将总是列数减去1）。该calc()函数允许我们在宽度值内部执行此计算，因此对于跨4列的任何项目，我们可以执行此操作，例如：</p> + +<pre class="brush: css notranslate">.col.span4 { + width: calc((6.25%*4) + (2.08333333%*3)); +}</pre> + +<p>尝试使用以下代码替换您的底部规则，然后在浏览器中重新加载它，看看是否得到相同的结果：</p> + +<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } +.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } +.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } +.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } +.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); } +.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } +.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } +.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> + +<div class="note"> +<p><strong>注意：</strong>您可以在<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a>（也可以<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">看到它的live</a>）中看到我们的完成版本。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>如果你不能让这个工作，它可能是因为你的浏览器不支持该calc()功能，虽然它是相当支持跨浏览器 - 远在IE9</p> +</div> + +<h3 id="语义与“非语义”网格系统">语义与“非语义”网格系统</h3> + +<p>向您的标记添加类来定义布局意味着您的内容和标记与其视觉呈现相关联。有时你会听到这种使用描述为“非语义”的CSS类 - 描述内容的外观 - 而不是描述内容的类的语义使用。这正是我们的情况下span2，span3类，等等。</p> + +<p>这些不是唯一的办法，你可以改为决定网格。然后将大小信息添加到现有语义类的规则中。例如，如果你有一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><div></a>类content，你想跨越8列，你可以复制从span8类的宽度，给你一个像这样的规则：</p> + +<pre class="brush: css notranslate">.content { + width: calc((6.25%*8) + (2.08333333%*7)); +}</pre> + +<div class="note"> +<p><strong>注意</strong>：如果你使用一个预处理器，如<a href="http://sass-lang.com/">Sass</a>，你可以创建一个简单的mixin来插入这个值。</p> +</div> + +<h3 id="在网格中启用偏移容器">在网格中启用偏移容器</h3> + +<p>我们创建的网格工作良好，只要我们想要启动所有的容器与网格的左手边齐平。如果我们想在第一个容器之前留下一个空的列空间 - 或者在容器之间 - 我们需要创建一个偏移类来添加一个左边距到我们的网站，以推动它在网格上。更多数学！</p> + +<p>让我们试试这个。</p> + +<p>从您之前的代码开始，或使用我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a>文件作为起点。</p> + +<p>让我们在CSS中创建一个类，它将容器元素偏移一列宽度。将以下内容添加到CSS的底部：</p> + +<pre class="brush: css notranslate">.offset-by-one { + margin-left: calc(6.25% + (2.08333333%*2)); +}</pre> + +<p>如果你喜欢自己计算百分比，请使用这一个：</p> + +<pre class="brush: css notranslate">.offset-by-one { + margin-left: 10.41666666%; +}</pre> + +<p>现在可以将此类添加到任何容器，列如你要在其左侧留下一列宽的空白。在HTML中添加这个：</p> + +<pre class="brush: html notranslate"><div class="col span6">14</div></pre> + +<p>尝试替换它</p> + +<pre class="brush: html notranslate"><div class="col span5 offset-by-one">14</div></pre> + +<div class="note"> +<p><strong>注意</strong>：您需要减少跨越的列数，为偏移量腾出空间！</p> +</div> + +<p>尝试加载和刷新以查看差异，或查看我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a>示例（见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">在线运行</a>）。完成的示例应如下所示：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> + +<div class="note"> +<p><strong>注意</strong>：作为一个额外的练习，你能实现一个offset-by-two类吗？</p> +</div> + +<h3 id="浮动网格限制">浮动网格限制</h3> + +<p>当使用浮动网格时，你需要注意：你的总宽度要加起来正确，并且你不能在一行中包含跨（越）度为多列的超过该行所能包含的元素。由于浮动工作方式，如果网格列的数量相对于网格变得太宽，则末端上的元素将下降到下一行，从而打破网格。</p> + +<p>还要记住，元素的内容比它们占据的行更宽，它会溢出，会看起来像一团糟。</p> + +<p>这个系统的最大限制是它基本上是一维的。我们处理的是列元素只能跨越多个列，而不能跨越行。这些旧的布局方法非常难以控制元素的高度，而没有明确设置高度，这是一个非常不灵活的方法 - 它只有当你能保证你的内容将是一定的高度才有效。</p> + +<h2 id="Flexbox_网格">Flexbox 网格?</h2> + +<p>如果你阅读我们以前关于<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">flexbox的</a>文章，可能会认为flexbox是创建网格系统的理想解决方案。目前有一些基于flexbox的网格系统可用，flexbox可以解决我们在创建上面的网格时已经发现的许多问题。</p> + +<p>然而，flexbox从来没有被设计为网格系统，并且在作为一体时提出了一系列新的挑战。作为一个简单的例子，我们可以把我们上面使用同样的例子标记和使用以下CSS样式的wrapper，row和col类：</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +} + + +.row { + display: flex; +} + +.col { + margin-left: 2.08333333%; + margin-bottom: 1em; + width: 6.25%; + flex: 1 1 auto; + background: rgb(255,150,150); +}</pre> + +<p>你可以在你自己的例子中尝试这些替换，或者看看我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a>示例代码（看它如何<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">运行</a>）。</p> + +<p>这里我们把每一行变成一个flex容器。使用基于flexbox的网格，我们仍然需要行，以便允许我们添加小于100％的元素。我们设置该容器display: flex。</p> + +<p>在.col我们将<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex">flex</a>属性的第一个值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow">flex-grow</a>）设置为1，项目可以增长，第二个值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink">flex-shrink</a>）为1，所以项目可以收缩，第三个值（<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis">flex-basis</a>）auto。由于我们的元素有一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/width">width</a>集合，auto将使用该宽度作为flex-basis值。</p> + +<p>在顶端，我们在网格上获得十二个整洁的盒子，并且它们随着我们改变视口宽度而同样地增长和收缩。然而，在下一行，我们只有四个项目，这些也从60px基础增长和收缩。只有四个他们可以增长比上面的行中的项目多，结果是他们都占据第二行相同的宽度。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> + +<p>为了解决这个问题，我们仍然需要包含我们的span类来提供一个宽度来替换flex-basis那个元素所使用的值。</p> + +<p>他们也不尊重上面的网格，因为他们不知道如何使用它。</p> + +<p><strong>Flexbox</strong>是<strong>一维</strong>设计。它处理单个维度，即行或列。不能为列和行创建严格的网格，这意味着如果我们要为网格使用flexbox，我们仍然需要为浮动布局计算百分比。</p> + +<p>在您的项目中，您可能仍然选择使用flexbox'grid'，因为flexbox提供的额外对齐和空间分布能力超过浮动。但是，您应该知道，您仍在使用工具，而不是它的设计目的。所以你可能会觉得它让你跳过额外的箍，得到你想要的最终结果。</p> + +<h2 id="第三方网格系统">第三方网格系统</h2> + +<p>现在我们了解了我们的网格计算背后的数学，我们是一个很好的地方看看一些第三方网格系统的共同使用。如果你在网上搜索“CSS Grid框架”，你会发现一个巨大的选项列表可供选择。流行的框架如<a href="http://getbootstrap.com/">Bootstrap</a>和<a href="http://foundation.zurb.com/">Foundation</a>包括一个网格系统。还有独立的网格系统，使用CSS或使用预处理器开发。</p> + +<p>让我们来看看这些独立系统之一，因为它演示了使用网格框架的常见技术。我们将使用的网格是Skeleton的一部分，一个简单的CSS框架。</p> + +<p>开始访问<a href="http://getskeleton.com/">Skeleton网站</a>，并选择“下载”以下载ZIP文件，解压缩此文件并将skeleton.css和normalize.css文件复制到一个新目录中。</p> + +<p>制作我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a>文件副本，并将其保存在与骨架相同的目录中，并规范化CSS。</p> + +<p>在HTML页面中包含骨架并规范化CSS，方法是在其头部添加以下内容：</p> + +<pre class="brush: html notranslate"><link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"></pre> + +<p>Skeleton不仅仅包括一个网格系统 - 它还包含用于排版的CSS和其他可以用作起点的页面元素。我们现在将这些默认值，但是 - 这是我们真正感兴趣的网格在这里。</p> + +<div class="note"> +<p><strong>注意</strong>：Normalize是由Nicolas Gallagher编写的一个非常有用的小型CSS库，它自动执行一些有用的基本布局修复，并使默认元素样式在不同浏览器之间更一致。</p> +</div> + +<p>我们将使用类似的HTML到我们前面的例子。在您的HTML内文中添加以下内容：</p> + +<pre class="brush: html notranslate"><div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> +</div></pre> + +<p>要开始使用Skeleton，我们需要给包装器<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><div></a>一个类container- 这已经包括在我们的HTML中。这将以960像素的最大宽度为中心。你可以看到盒子现在从不变得宽于960像素。</p> + +<p>你可以看一下skeleton.css文件，看看我们应用这个类时使用的CSS。在<div>使用居中auto左，右页边距，以及20像素的填充应用于左侧和右侧。Skeleton也设置<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing">box-sizing</a>属性border-box像我们以前做的，所以此元素的填充和边框将包括在总宽度。</p> + +<pre class="brush: css notranslate">.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +}</pre> + +<p>元素只能是网格的一部分（如果它们在一行内），因此与前面的示例一样，我们需要一个额外的<div>或其他元素，其中一个类row嵌套在content <div>实际的内容容器之间<div>。我们已经做到了这一点。</p> + +<p>现在让我们布置集装箱。骨架基于12列网格。顶行框都需要类，one column以使它们跨越一列。</p> + +<p>现在添加这些，如下面的代码段所示：</p> + +<pre class="brush: html notranslate"><div class="container"> + <div class="row"> + <div class="col one column">1</div> + <div class="col one column">2</div> + <div class="col one column">3</div> + /* and so on */ + </div> +</div></pre> + +<p>接下来，给出第二行类上的容器，解释它们应该跨越的列数，如下：</p> + +<pre class="brush: html notranslate"><div class="row"> + <div class="col one column">13</div> + <div class="col six columns">14</div> + <div class="col three columns">15</div> + <div class="col two columns">16</div> +</div></pre> + +<p>尝试保存HTML文件并将其加载到浏览器中以查看效果。</p> + +<div class="note"> +<p><strong>注意</strong>：如果您无法使此示例工作，请尝试将其与我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a>文件进行比较（见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">在线运行</a>）。</p> +</div> + +<p>如果你看看skeleton.css文件，你可以看到这是如何工作的。例如，Skeleton对下面定义的样式元素添加了“三列”类。</p> + +<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> + +<p>所有的Skeleton（或任何其他网格框架）正在设置预定义的类，您可以通过将它们添加到您的标记使用。这和你自己计算这些百分比的工作完全一样。</p> + +<p>正如你所看到的，当使用Skeleton时，我们需要写很少的CSS。它处理所有的浮动我们当我们添加类到我们的标记。正是这种将布局的责任转移到其他使网格系统的框架成为一个引人注目的选择的能力！</p> + +<p>骨架是比你可能遇到的一些框架更简单的网格系统。大型框架（如Bootstrap和Foundation）中的网格为各种屏幕宽度提供了更多的功能和额外的断点。但是，它们都以类似的方式工作 - 通过向您的标记添加特定类，您可以使用预定义网格控制元素的布局。</p> + +<h2 id="本地CSS网格与网格布局">本地CSS网格与网格布局</h2> + +<p>我们在本文一开始所说的，CSS的之前没有过一个真正的体系，用于创建网格布局。但这已经改变了。大部分常用的浏览器的最新版本已经提供了对新<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS的网格布局模块</a>的支持。</p> + +<p>我们看过上面的Skeleton Grid框架 - 像其他第三方网格，甚至是手工构建的网格，它需要你添加<div>s形成行，然后指定这些行中的项目将跨越的列数。</p> + +<p>使用CSS网格布局，您可以完全在CSS中指定网格，而不需要将这些帮助类添加到标记。让我们看看我们的简单示例，看看我们将如何使用CSS Grid Layout创建相同的布局。</p> + +<h3 id="构建本地网格">构建本地网格</h3> + +<p>首先，通过制作<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html">css-grid.html</a>文件的本地副本来开始。它包含以下标记：</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + <div class="col">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> +</div></pre> + +<p>这次我们有一个父 <code><div></code> 的类 <code>wrapper</code>，所有的子元素只是直接出现在包装器内——没有行元素。我们已经将一个类添加到应该跨越多个列的项目。</p> + +<p>现在将以下内容添加到<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style"><style></a>元素中：</p> + +<pre class="brush: css notranslate">.wrapper { + width: 90%; + max-width: 960px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 20px; +} + +.col { + background: rgb(255,150,150); +}</pre> + +<p>这里我们设置.wrapper规则，因此它是90％的身体宽度，居中，并且 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width">max-width</a> 为 960px。</p> + +<p>现在为CSS网格属性。我们可以使用{{cssxref("display")}} 属性的 <code>grid</code> 值声明一个网格，使用 {{cssxref("grid-gap")}} 设置网格的间隔，然后使用{{cssxref("grid-template-columns")}} 属性、 <code>repeat()</code> 函数和 <code>fr</code> 单位——这个为网格布局定义的单位——创建一个12列等宽的网格。</p> + +<p>该fr单元是一小部分单元-它描述在网格容器的可用空间的一小部分。如果所有列都是1fr，它们将占用相等的空间量。这消除了计算百分比以创建灵活网格的需要。</p> + +<p>创建网格后，网格自动布局规则将立即在这个网格上布置我们的框，我们得到一个十二列灵活的网格布局。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13907/css-grid-incomplete.png" style="display: block; height: 70px; margin: 0px auto; width: 971px;"></p> + +<p>要对跨越网格上的多个列轨道的容器进行样式化，我们可以使用该<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column">grid-column</a>属性。跨6列例如：</p> + +<pre class="brush: css notranslate">.span6 { + grid-column: auto / span 6; +}</pre> + +<p>跨越3：</p> + +<pre class="brush: css notranslate">.span3 { + grid-column: auto / span 3; +}</pre> + +<p>正斜杠之前的值是开始列——在这种情况下，我们没有明确设置，允许浏览器放在下一个可用的列。然后我们可以设置它跨越6，3或我们想要的许多列。</p> + +<p>在CSS的底部添加以下内容：</p> + +<pre class="brush: css notranslate">.span2 { grid-column: auto / span 2;} +.span3 { grid-column: auto / span 3;} +.span4 { grid-column: auto / span 4;} +.span5 { grid-column: auto / span 5;} +.span6 { grid-column: auto / span 6;} +.span7 { grid-column: auto / span 7;} +.span8 { grid-column: auto / span 8;} +.span9 { grid-column: auto / span 9;} +.span10 { grid-column: auto / span 10;} +.span11 { grid-column: auto / span 11;} +.span12 { grid-column: auto / span 12;}</pre> + +<p>OK！尝试保存和刷新，你会看到容器适当地跨多个列。</p> + +<p>CSS网格是<strong>二维</strong>的，因此随着布局的增长和缩小，元素保持水平和垂直排列。</p> + +<p>您可以通过将以下内容替换最后的4个字符串来进行测试<div>：</p> + +<pre class="brush: html notranslate"><div class="col">13some<br>content</div> +<div class="col span6">14this<br>is<br>more<br>content</div> +<div class="col span3">15this<br>is<br>less</div> +<div class="col span2">16</div></pre> + +<p>这里我们有意添加了一些行break（<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/br"><br></a>）标签，以强制某些列变得比其他列高。如果你尝试保存和刷新，你会看到列的高度调整为与最高的容器一样高，所以一切都保持整洁。</p> + +<p>最终的布局如下：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13909/css-grid-finished.png" style="display: block; height: 130px; margin: 0px auto; width: 972px;"></p> + +<div class="note"> +<p>注意：如果您无法使此示例工作，您可以检查您的代码与我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">完成版本</a>（也可以看<a href="http://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">在线运行</a>）。</p> +</div> + +<h3 id="一些不错的CSS网格特性">一些不错的CSS网格特性</h3> + +<p>对于CSS网格，我们不需要通过边距来抵消它们。尝试在您的CSS中进行这些更改：</p> + +<pre class="brush: css notranslate">.content { + grid-column: 2 / 8; +}</pre> + +<pre class="brush: html notranslate"><div class="col span2 content">16</div></pre> + +<p>容器16，现在将下一个可用的行上跨越第2列到第8列。</p> + +<p>我们可以像跨越列一样轻松地跨越多行：</p> + +<pre class="brush: css notranslate">.content { + grid-column: 2 / 8; + grid-row: 3 / 5; +}</pre> + +<p>现在将容器16，跨越行3至5以及列2至8。</p> + +<p>不需要使用边距伪造沟槽或显式计算它们的宽度 — CSS网格具有这种功能内置的<code>grid-gap</code> 属性。</p> + +<p>我们只是接触了CSS网格布局所有可能的皮毛，但在本文的行文中要理解的关键是，你不需要用网格创建一个网格系统——它已经是一个了。您可以编写CSS，将项目直接放入预定义的网格上。要了解更多，请看 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>。</p> + +<h3 id="主动学习：编写自己的简单网格">主动学习：编写自己的简单网格</h3> + +<p>在<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">CSS布局aticle简介中</a>，我们包括一个关于<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction#CSS_tables">CSS表</a>的部分，其中包括一个简单的形式示例（参见<a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a>实例和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">源代码</a>）。我们希望您复制此示例，并执行以下操作：</p> + +<ol> + <li>删除 <div>元素 — 将会对你的内容处理行数和列。就不再需要此作为CSS网格。</li> + <li>使用CSS网格属性创建一个接近原始的表单布局，你必须设定容器元素的宽度，并思考怎么设置列的的间隙和行差距。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>：先去做这个，如果你真的卡住了，你可以检查你的代码和我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-tables-as-grid.html">css-tables-as-grid.html</a>例子。不要作弊，先试着练习！</p> +</div> + +<h2 id="概要">概要</h2> + +<p>阅读这篇文章后，你应该已经了解了网格布局和网格框架如何在CSS中工作。你也已经窥探未来的CSS网格，现在应该明白，我们今天使用的网格框架本质上是一个临时的解决方案，直到我们有一个广泛支持的本地方式在CSS中实现这一点。</p> + +<p>{{PreviousMenu("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/index.html b/files/zh-cn/learn/css/css_layout/index.html new file mode 100644 index 0000000000..eaf24d0bda --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/index.html @@ -0,0 +1,78 @@ +--- +title: CSS 布局 +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - Styling CSS boxes + - TopicStub + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">此刻，我们已经看过CSS的基础知识，如何设置文本的样式，以及如何设置和操作内容所在的框。 现在是时候看看如何把你的盒子放在与视口相关的正确位置上。 我们已经涵盖了必要的先决条件，所以我们现在可以深入到CSS布局，查看不同的显示设置，涉及浮动和定位的传统布局方法，以及像flexbox这样的现代布局工具。</p> + +<h2 id="前提条件：">前提条件：</h2> + +<p>在开始前，你应该已经具备:</p> + +<ol> + <li>对HTML的基础了解，在<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>部分讨论过的。</li> + <li>一定的CSS基础，在<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>部分讨论过的。</li> + <li>了解如何<a href="/zh-CN/docs/Learn/CSS/Building_blocks">样式化盒子模型</a>.</li> +</ol> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>提示</strong></span>: 如果你在一台电脑/平板电脑/其他设备上工作，而你没有能力创建自己的文件，你可以尝试（大部分）在线编码程序中的代码示例，如 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a> 。</p> +</div> + +<h2 id="指南">指南</h2> + +<p>这些文章将提供在CSS中可用的基本布局工具和技术的指导。</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">介绍 CSS 布局</a></dt> + <dd>本文将重述一些我们在之前的模块中已经涉及的CSS布局功能——例如不同的 {{cssxref("display")}} 值——并介绍我们将在本单元中涵盖的一些概念。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></dt> + <dd>这篇文章介绍正常的流布局，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></dt> + <dd><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">弹性盒</a> 是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。 本文将解释所有的基本原理。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></dt> + <dd>网格是一个成熟的设计工具，许多现代网站布局是基于规则网格。在本文中，我们将看看基于网格的设计，以及如何使用CSS来创建网格——两者都通过现在的工具，和刚刚开始在浏览器中可用的新技术。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></dt> + <dd>最初对于文本块中的浮动图像，{{cssxref("float")}}属性已经成为在网页上创建多个列布局的最常用工具之一。本文解释所有。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></dt> + <dd>定位允许您从常规文档布局流程中取出元素，并使它们具有不同的行为，例如坐在另一个之上，或始终保持在浏览器视口内的同一位置。 本文解释不同的{{cssxref("position")}} 值，以及如何使用它们。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></dt> + <dd>多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。 这篇文章介绍怎么使用这一特性。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式布局</a></dt> + <dd>随着越来越多的屏幕尺寸出现在支持Web的设备上，响应式Web设计（RWD）的概念出现了：一组允许网页改变其布局和外观以适应不同的屏幕宽度、分辨率等的实践。这一想法改变了我们为多设备Web设计的方式，在本文中，我们将帮助您了解掌握它所需的主要技术。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></dt> + <dd><strong>媒体查询</strong> 提供了一种仅当浏览器和设备环境与您指定的规则匹配时才应用css的方法，例如“viewport（视区）宽度大于480像素”。媒体查询是响应式Web设计的一个关键部分，因为它们允许您根据视区的大小创建不同的布局，但也可以用于检测有关网站运行环境的其他内容，例如用户是否使用触摸屏而不是鼠标。在本节中，您将首先了解媒体查询中使用的语法，然后在一个演示如何使简单设计具有响应性的示例中继续使用它们。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方法</a></dt> + <dd>网格系统是css布局中使用的一个非常常见的特性，在css网格布局之前，它们往往使用浮动或其他布局特性来实现。您可以将布局想象为一组列（例如4、6或12），然后将网页内容放入这些列中。在本文中，我们将探讨这些旧方法是如何工作的，以便您了解在处理旧项目时如何使用它们。</dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></dt> + <dd> + <p>在本模块中，我们建议使用弹性盒和网格作为主要布局方法。但是，您的网站会遇到使用旧浏览器的访问者，或者不支持您使用的新布局方法的浏览器。在网络开发上一直有这种状况——那就是随着新特性的开发，不同的浏览器将优先支持不同的特性。本文解释了如何使用现代web技术而不将使用旧版本浏览器的用户拒之门外。</p> + </dd> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">测试: 基本布局掌握</a></dt> + <dd>通过布置网页来测试你对不同布局方法的知识的掌握。</dd> +</dl> + +<h2 id="参见">参见</h2> + +<dl> + <dt><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">练习定位案例</a></dt> + <dd>在最后一篇文章中介绍了定位的基础知识，现在将讨论构建几个真实世界的例子，以说明你可以通过定位做什么样的事情。</dd> +</dl> diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..ef7ff27324 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -0,0 +1,704 @@ +--- +title: 介绍 CSS 布局 +slug: Learn/CSS/CSS_layout/Introduction +tags: + - CSS + - flexbox + - 介绍 + - 初学者 + - 学习 + - 定位 + - 布局 + - 文章 + - 流 + - 浮动 + - 网格 + - 表格 +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">本文将回顾我们以前模块中已经介绍过的一些CSS布局特性——例如不同的{{cssxref("display")}}值——并介绍我们将在本模块中使用的一些概念。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td>对HTML有一些基本的了解 (学习“<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>”), 并且理解CSS的工作原理 (学习“<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS介绍</a>”).</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>对CSS页面布局技术有一个总体的了解. 每种技术都能够在后面的教程中获取到更加详细的信息.</td> + </tr> + </tbody> +</table> + +<p>CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Layout_mode">布局技术</a>的细节：</p> + +<ul> + <li>正常布局流</li> + <li>{{cssxref("display")}}属性</li> + <li>弹性盒子</li> + <li>网格</li> + <li>浮动</li> + <li>定位</li> + <li>CSS 表格布局</li> + <li>多列布局</li> +</ul> + +<p>每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。</p> + +<h2 id="正常布局流Normal_flow">正常布局流(Normal flow)</h2> + +<p>正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：</p> + +<pre class="brush: html notranslate"><p>I love my cat.</p> + +<ul> + <li>Buy cat food</li> + <li>Exercise</li> + <li>Cheer up friend</li> +</ul> + +<p>The end!</p></pre> + +<p>默认情况下，浏览器的显示如下:</p> + +<p>{{ EmbedLiveSample('正常布局流Normal_flow', '100%', 200) }}</p> + +<p>注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。</p> + +<p>出现在另一个元素下面的元素被描述为<strong>块</strong>元素，与出现在另一个元素旁边的<strong>内联元素</strong>不同，内联元素就像段落中的单个单词一样。</p> + +<div class="blockIndicator note"> +<p>注意：块元素内容的布局方向被描述为<strong>块方向</strong>。块方向在英语等具有水平<strong>书写模式</strong>(<code>writing mode</code>)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的<strong>内联方向</strong>是内联内容（如句子）的运行方向。</p> +</div> + +<p>当你使用css创建一个布局时，你正在离开<strong>正常布局流</strong>，但是对于页面上的多数元素，<strong>正常布局流</strong>将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是如此重要，因为你可以按照默认的方式来搭建页面，而不是自己发明轮子。</p> + +<p>下列布局技术会覆盖默认的布局行为：</p> + +<ul> + <li><strong> {{cssxref("display")}} </strong>属性 — 标准的value,比如<code>block</code>, <code>inline</code> 或者 <code>inline-block</code> 元素在正常布局流中的表现形式 (见 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). 接着是全新的布局方式，通过设置<code>display</code>的值, 比如 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>浮动</strong>——应用 <strong>{{cssxref("float")}}</strong> 值，诸如 <code>left</code> 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。</li> + <li><strong>{{cssxref("position")}} </strong>属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 <code>static</code> ，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。</li> + <li><strong>表格布局</strong>— 表格的布局方式可以用在非表格内容上，可以使用<code>display: table</code>和相关属性在非表元素上使用。</li> + <li><strong>多列布局</strong>— 这个 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns">Multi-column layout</a> 属性 可以让块按列布局，比如报纸的内容就是一列一列排布的。</li> +</ul> + +<h2 id="display属性">display属性</h2> + +<p>在css中实现页面布局的主要方法是设定<code>display</code>属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个<code>display</code>的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是<code>display:block</code>。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为{{htmlelement("a")}}元素默认为<code>display:inline</code>。</p> + +<p>您可以更改此默认显示行为。例如，{{htmlelement("li")}}元素默认为<code>display:block</code>，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为<code>inline</code>，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，您可以更改任何元素的<code>display</code>值，这意味着您可以根据它们的语义选择html元素，而不必关心它们的外观。他们的样子是你可以改变的。</p> + +<p>除了可以通过将一些内容从<code>block</code>转换为<code>inline</code>（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以<code>display</code>值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是<code>display</code>:<code>flex</code>和<code>display</code>:<code>grid</code>。</p> + +<h2 id="弹性盒子Flexbox">弹性盒子(Flexbox)</h2> + +<p>Flexbox 是CSS 弹性盒子布局模块（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用flexbox，你只需要在想要进行flex布局的父元素上应用<code>display: flex</code> ，所有直接子元素都将会按照flex进行布局。我们来看一个例子。</p> + +<p>下面这些HTML标记描述了一个class为<code>wrapper</code>的容器元素，它的内部有三个<code><div></code>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示。</p> + +<p>现在，当我们把<code>display: flex</code>添加到它的父元素时，这三个元素就自动按列进行排列。这是由于它们变成了<em>flex项(flex items)</em>，按照flex容器（也就是它们的父元素）的一些flex相关的初值进行flex布局：它们整整齐齐排成一行，是因为父元素上<code>flex-direction</code>的初值是<code>row</code>。它们全都被拉伸至和最高的元素高度相同，是因为父元素上<code>align-items</code>属性的初值是<code>stretch</code>。这就意味着所有的子元素都会被拉伸到它们的flex容器的高度，在这个案例里就是所有flex项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白。</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>除了上述可以被应用到flex容器的属性以外，还有很多属性可以被应用到flex项(flex items)上面。这些属性可以改变flex项在flex布局中占用宽/高的方式，允许它们通过伸缩来适应可用空间。</p> + +<p>作为一个简单的例子，我们可以在我们的所有子元素上添加{{cssxref("flex")}} 属性，并赋值为<code>1</code>，这会使得所有的子元素都伸展并填充容器，而不是在尾部留下空白，如果有更多空间，那么子元素们就会变得更宽，反之，他们就会变得更窄。除此之外，如果你在HTML标记中添加了一个新元素，那么它们也会变得更小，来为新元素创造空间——不管怎样，最终它们会调整自己直到占用相同宽度的空间。</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>注意：</strong>为了找到更多关于Flexbox的信息，看看我们的 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> 的文章。</p> +</div> + +<h2 id="Grid布局">Grid布局</h2> + +<p>Flexbox用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐。</p> + +<p>同flex一样，你可以通过指定display的值来转到grid布局：<code>display: grid</code>。下面的例子使用了与flex例子类似的HTML标记，描述了一个容器和若干子元素。除了使用<code>display:grid</code>，我们还分别使用 {{cssxref("grid-template-rows")}} 和 {{cssxref("grid-template-columns")}} 两个属性定义了一些行和列的轨道。定义了三个<code>1fr</code>的列，还有两个<code>100px</code>的行之后，无需再在子元素上指定任何规则，它们自动地排列到了我们创建的格子当中。</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> + <div class="box6">Six</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p>一旦你拥有了一个grid，你也可以显式地将元素摆放在里面，而不是依赖于浏览器进行自动排列。在下面的第二个例子里，我们定义了一个和上面一样的grid，但是这一次我们只有三个子元素。我们利用 {{cssxref("grid-column")}} 和 {{cssxref("grid-row")}} 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>注意</strong>: 这两个例子只是展示了grid布局的冰山一角，要深入了解grid布局，请参阅我们的文章<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>。</p> +</div> + +<p>这篇指南的其余部分介绍了其他的布局方式，它们与你的页面的主要布局结构关系不大，但是却能够帮助你实现特殊的操作。同时，只要你理解了每一个布局任务的初衷，你就能够马上意识到哪一种布局更适合你的组件。</p> + +<h2 id="浮动">浮动</h2> + +<p>把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流(normal flow)中移除，这时候其他的周围内容就会在这个被设置浮动({{cssxref("float")}})的元素周围环绕。</p> + +<p>{{cssxref("float")}} 属性有四个可能的值：</p> + +<ul> + <li><code>left</code> — 将元素浮动到左侧。</li> + <li><code>right</code> — 将元素浮动到右侧。</li> + <li><code>none</code> — 默认值, 不浮动。</li> + <li><code>inherit</code> — 继承父元素的浮动属性。</li> +</ul> + +<p>在下面这个例子当中，我们把一个<code><div></code>元素浮动到左侧，并且给了他一个右侧的{{cssxref("margin")}}，把文字推开。这给了我们文字环绕着这个<code><div></code>元素的效果，在现代网页设计当中，这是你唯一需要学会的事情。</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>注意: </strong>: CSS浮动的知识会在我们关于 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a>的教程当中被详细地解释。除此之外，如果您想要了解在Flexbox和Grid布局出现之前我们是如何进行列布局的（仍然有可能碰到这种情形），请阅读我们关于<a href="/zh-CN/docs/Learn/CSS/CSS_layout/%E4%BC%A0%E7%BB%9F%E7%9A%84%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95">传统布局方式</a>的文章.</p> +</div> + +<h2 id="定位技术">定位技术</h2> + +<p>定位(positioning)能够让我们把一个元素从它原本在正常布局流(normal flow)中应该在的位置移动到另一个位置。定位(positioning)并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置。</p> + +<p>有一些非常有用的技术在特定的布局下依赖于{{cssxref("position")}}属性。同时，理解定位(positioning)也能够帮助你理解正常布局流(normal flow)，理解把一个元素移出正常布局流(normal flow)是怎么一回事。</p> + +<p>有五种主要的定位类型需要我们了解：</p> + +<ul> + <li><strong>静态定位(Static positioning)</strong>是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。</li> + <li><strong>相对定位(Relative positioning)</strong>允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。</li> + <li><strong>绝对定位(Absolute positioning)</strong>将元素完全从页面的正常布局流(normal layout flow)中移出，类似将它单独放在一个图层中。我们可以将元素相对于页面的 <code><html></code> 元素边缘固定，或者相对于该元素的<em>最近被定位祖先元素(nearest positioned ancestor element)</em>。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。</li> + <li><strong>固定定位(Fixed positioning)</strong>与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定，而不是相对另外一个元素。 这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。</li> + <li><strong>粘性定位(Sticky positioning)</strong>是一种新的定位方式，它会让元素先保持和<code>position: static</code>一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像<code>position: fixed</code>一样定位。</li> +</ul> + +<h3 id="简单定位示例">简单定位示例</h3> + +<p>我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在下面这一个相同的HTML上：</p> + +<pre class="brush: html notranslate"><h1>Positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">I am a basic block level element.</p> +<p>I am a basic block level element.</p></pre> + +<p>该HTML将使用以下CSS默认样式：</p> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> + +<p>渲染效果如下:</p> + +<p>{{ EmbedLiveSample('简单定位示例', '100%', 300) }}</p> + +<h3 id="相对定位">相对定位</h3> + +<p>相对定位(relative positioning)让你能够把一个正常布局流(normal flow)中的元素从它的默认位置按坐标进行相对移动。比如将一个图标往下调一点，以便放置文字. 我们可以通过下面的规则添加相对定位来实现效果: </p> + +<pre class="brush: css notranslate">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>这里我们给中间段落的{{cssxref("position")}} 一个 <code>relative</code>值——这属性本身不做任何事情，所以我们还添加了{{cssxref("top")}}和{{cssxref("left")}}属性。这些可以将受影响的元素向下向右移——这可能看起来和你所期待的相反，但你需要把它看成是左边和顶部的元素被“推开”一定距离，这就导致了它的向下向右移动。</p> + +<p>添加此代码将给出以下结果：</p> + +<div id="Relative_1"> +<div class="hidden"> +<h6 id="Relative_positioning_example">Relative positioning example</h6> + +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my relatively positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> + +<h3 id="绝对定位">绝对定位</h3> + +<p>绝对定位用于将元素移出正常布局流(normal flow)，以坐标的形式相对于它的容器定位到web页面的任何位置，以创建复杂的布局。有趣的是，它经常被用于与相对定位和浮动的协同工作。</p> + +<p>回到我们最初的非定位示例，我们可以添加以下的CSS规则来实现绝对定位：</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>这里我们给我们的中间段一个{{cssxref("position")}}的 <code>absolute</code>值，并且和前面一样加上 {{cssxref("top")}} 和{{cssxref("left")}} 属性。但是，添加此代码将给出以下结果：</p> + +<div id="Absolute_1"> +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my absolutely positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> + +<p>这和之前截然不同！定位元素现在已经与页面布局的其余部分完全分离，并位于页面的顶部。其他两段现在靠在一起，好像之前那个中间段落不存在一样。{{cssxref("top")}}和{{cssxref("left")}}属性对绝对位置元素的影响不同于相对位置元素。在这一案例当中，他们没有指定元素相对于原始位置的移动程度。相反，在这一案例当中，它们指定元素应该从页面边界的顶部和左边的距离(确切地说，是 <code><html></code>元素的距离)。我们也可以修改作为容器的那个元素（在这里是<code><html></code>元素），要了解这方面的知识，参见关于<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位(positioning)</a>的课程</p> + +<p>我们现在暂时不讨论固定定位（ fixed positioning ）——它基本上以相同的方式工作，除了它仍然固定在浏览器窗口的边缘，而不是它定位的父节点的边缘。</p> + +<h3 id="固定定位">固定定位</h3> + +<p>固定定位(fixed positioning)同绝对定位(absolute positioning)一样，将元素从文档流(document flow)当中移出了。但是，定位的坐标不会应用于"容器"边框来计算元素的位置，而是会应用于视口(viewport)边框。利用这一特性，我们可以轻松搞出一个固定位置的菜单，而不受底下的页面滚动的影响。</p> + +<p>在这个例子里面，我们在HTML加了三段很长的文本来使得页面可滚动，又加了一个带有<code>position: fixed</code>的盒子。</p> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p>Paragraph 1.</p> +<p>Paragraph 2.</p> +<p>Paragraph 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="粘性定位">粘性定位</h3> + +<p>粘性定位(sticky positioning)是最后一种我们能够使用的定位方式。它将默认的静态定位(static positioning)和固定定位(fixed positioning)相混合。当一个元素被指定了<code>position: sticky</code>时，它会在正常布局流中滚动，直到它出现在了我们给它设定的相对于容器的位置，这时候它就会停止随滚动移动，就像它被应用了<code>position: fixed</code>一样。</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>注意</strong>: 想要发现更多关于定位的信息，请参阅我们的<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>和<a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a>文章。</p> +</div> + +<h2 id="表格布局">表格布局</h2> + +<p>HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。</p> + +<p>一个{{htmlelement("table")}}标签之所以能够像表格那样展示，是由于css默认给{{htmlelement("table")}}标签设置了一组table布局属性。当这些属性被应用于排列非{{htmlelement("table")}}元素时，这种用法被称为“使用CSS表格”。</p> + +<p>下面这个例子展示了一个这样的用法。使用CSS表格来进行布局，在现在这个时间点应该被认为是一种传统方法，它通常会被用于兼容一些不支持Flexbox和Grid的浏览器。</p> + +<p>让我们来看一个例子。首先，创建HTML表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在{{htmlelement("div")}}中。</p> + +<pre class="brush: html notranslate"><form> + <p>First of all, tell us your name and age.</p> + <div> + <label for="fname">First name:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Last name:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Age:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>现在，我们例子中的CSS。除了使用 {{cssxref("display")}} 属性外，大多数CSS都是相当普通的。 {{htmlelement("form")}}, {{htmlelement("div")}}, {{htmlelement("label")}}和{{htmlelement("input")}}被告知要分别显示表、表行和表单元——基本上，它们会像HTML表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。</p> + +<p>你会注意到标题段落已经给出了 <code>display: table-caption;</code>——这使得它看起来就像一个表格{{htmlelement("caption")}} ——同时出于设计需要，我们通过<code>caption-side: bottom;</code> 告诉标题应该展示在表格的底部，即使这个{{htmlelement("p")}}标记在源码中是在<code><input></code>之前。这就能让你有一点灵活的弹性。</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>结果如下：</p> + +<p>{{ EmbedLiveSample('CSS_表格', '100%', '170') }}</p> + +<p>你可以在 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> 看到预览版 (也可以见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">源码</a>)</p> + +<h2 id="多列布局">多列布局</h2> + +<p>多列布局模组给了我们 一种把内容按列排序的方式，就像文本在报纸上排列那样。由于在web内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术。</p> + +<p>要把一个块转变成多列容器(multicol container)，我们可以使用 {{cssxref("column-count")}}属性来告诉浏览器我们需要多少列，也可以使用{{cssxref("column-width")}}来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。</p> + +<p>在下面这个例子中，我们从一个class为<code>container</code>的<code><div></code>容器元素里边的一块HTML开始。</p> + +<pre class="brush: html notranslate"><div class="container"> + <h1>Multi-column layout</h1> + + <p>Paragraph 1.</p> + <p>Paragraph 2.</p> + +</div> +</pre> + +<p>我们指定了该容器的<code>column-width</code>为200像素，这让浏览器创建了尽可能多的200像素的列来填充这一容器。接着他们共同使用剩余的空间来伸展自己的宽度。</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html notranslate"> <div class="container"> + <h1>Multi-column Layout</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="总结">总结</h2> + +<p>本文提供了关于您应该了解的所有布局技术的简要概述。阅读更多关于每一项技术的信息！</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/zh-cn/learn/css/css_layout/media_queries/index.html b/files/zh-cn/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..06f7fb7d51 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,425 @@ +--- +title: 媒体查询入门指南 +slug: Learn/CSS/CSS_layout/Media_queries +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<p><strong>CSS媒体查询</strong>为你提供了一种应用CSS的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用，例如“视口宽于480像素”的时候。媒体查询是响应式Web设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。在本节课，你将会先学习到媒体查询的语法，然后继续在一个被安排好的示例中使用它，这个示例还会告诉你一个简单的设计是可以怎么被弄成响应式的。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML基础知识（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），对CSS工作方式的大致了解（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>和<a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解如何使用媒体查询和用它建立响应式设计的最常见方法。</td> + </tr> + </tbody> +</table> + +<h2 id="媒体查询基础">媒体查询基础</h2> + +<p>最简单的媒体查询语法看起来是像这样的：</p> + +<pre class="brush: css notranslate">@media <em>media-type</em> and (<em>media-feature-rule</em>) { + /* CSS rules go here */ +}</pre> + +<p>它由以下部分组成：</p> + +<ul> + <li>一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；</li> + <li>一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；</li> + <li>一组CSS规则，会在测试通过且媒体类型正确的时候应用。</li> +</ul> + +<h3 id="媒体类型">媒体类型</h3> + +<p>你可以指定的媒体类型为：</p> + +<ul> + <li><code>all</code></li> + <li><code>print</code></li> + <li><code>screen</code></li> + <li><code>speech</code></li> +</ul> + +<p>下面的媒体查询将会在页面被打印的时候把body设定为只有12pt大小。当页面在浏览器中载入的时候，它将不会生效。</p> + +<pre class="brush: css notranslate"><code>@media print { + body { + font-size: 12pt; + } +}</code></pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>这里的媒体类型是和所谓的{{glossary("MIME type")}}不同的东西。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>备注：</strong> 在第三级媒体查询规范中，定义了其他一些媒体类型，它们已经不被建议使用，而且应该被避免使用。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>媒体类型是可选的，如果你没有在媒体查询中指示一个媒体类型的话，那么媒体查询默认会设为用于全部媒体类型。</p> +</div> + +<h3 id="媒体特征规则">媒体特征规则</h3> + +<p>在指定了类型以后，你可以用一条规则指向一种媒体特征。</p> + +<h4 id="宽和高">宽和高</h4> + +<p>为了建立响应式设计（已经广受浏览器支持），我们一般最常探测的特征是视口宽度，而且我们可以使用<code>min-width</code>、<code>max-width</code>和<code>width</code>媒体特征，在视口宽度大于或者小于某个大小——或者是恰好处于某个大小——的时候，应用CSS。</p> + +<p>这些特征是用来创建响应不同屏幕大小的布局的。例如，要想在视口正好是600像素的时候，让body的文本变为红色，你可能会使用下面的媒体查询。</p> + +<pre class="brush: css notranslate"><code>@media screen and (width: 600px) { + body { + color: red; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">打开这个示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">查看源代码</a>。</p> + +<p><code>width</code>（和<code>height</code>）媒体特征可以以数值范围使用，于是就有了<code>min-</code>或者<code>max-</code>的前缀，指示所给的值是最小值还是最大值。例如，要让颜色在视口窄于400像素的时候变成蓝色的话，可以用<code>max-width</code>：</p> + +<pre class="brush: css notranslate"><code>@media screen and (max-width: 400px) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">打开示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">查看源代码</a>。</p> + +<p>实践中，使用最小值和最大值对响应式设计有很多的用处，所以你会很少见到<code>width</code>或<code>height</code> 单独使用的情况。</p> + +<p>还有许多其他媒体特征可以供你测试，尽管于4级和5级媒体查询规范中引入了一些新特征，它们受浏览器支持仍然有限。在MDN上，每个特征都已经同浏览器支持信息一同记载下来，你可以在<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">使用媒体查询：媒体特征</a>中找到一张完整的列表。</p> + +<h4 id="朝向">朝向</h4> + +<p>一个受到良好支持的媒体特征是<code>orientation</code>，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式。要在设备处于横向的时候改变body文本颜色的话，可使用下面的媒体查询。</p> + +<pre class="brush: css notranslate"><code>@media (orientation: landscape) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">查看源代码</a>。</p> + +<p>标准的桌面视图是横放朝向的，在这种朝向上能够表现良好的设计，在处于竖放模式的手机或平板电脑上可能不会表现得这么好。对朝向的测试可以帮你建立一个为竖放设备优化的布局。</p> + +<h4 id="使用指点设备">使用指点设备</h4> + +<p>作为四级规范的一部分，<code>hover</code>媒体特征被引入了进来。这种特征意味着你可以测试用户是否能在一个元素上悬浮，这也基本就是说他们正在使用某种指点设备，因为触摸屏和键盘导航是没法实现悬浮的。</p> + +<pre class="brush: css notranslate"><code>@media (hover: hover) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">查看源代码</a>。</p> + +<p>如果我们知道用户不能悬浮的话，我们可以默认显示一些交互功能。对于能够悬浮的用户，我们可以选择在悬浮在链接上的时候，让这些功能可用。</p> + +<p>还是在四级规范中，出现了<code>pointer</code>媒体特征。它可取三个值：<code>none</code>、<code>fine</code>和<code>coarse</code>。<code>fine</code>指针是类似于鼠标或者触控板的东西，它让用户可以精确指向一片小区域。<code>coarse</code>指针是你在触摸屏上的手指。<code>none</code>值意味着，用户没有指点设备，也许是他们正只使用键盘导航，或者是语音命令。</p> + +<p>使用<code>pointer</code>可以在用户使用屏幕时进行交互时，帮你更好地设计响应这种交互的界面。例如，如果你知道用户正在用触摸屏设备交互的时候，你可以建立更大的响应区域。</p> + +<h2 id="更复杂的媒体查询">更复杂的媒体查询</h2> + +<p>有了所有不同的可用的媒体查询，你可能想要把它们混合起来，或者建立查询列表——其中的任何一个都可以匹配生效。</p> + +<h3 id="媒体查询中的“与”逻辑">媒体查询中的“与”逻辑</h3> + +<p>为了混合媒体特征，你可以以与在上面使用<code>and</code>很相同的方式，用<code>and</code>来混合媒体类型和特征。例如，我们可能会想要测得<code>min-width</code>和<code>orientation</code>，而body的文字只会在视口至少为400像素宽，且设备横放时变为蓝色。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 400px) and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">查看源代码</a>。</p> + +<h3 id="媒体查询中的“或”逻辑">媒体查询中的“或”逻辑</h3> + +<p>如果你有一组查询，且要其中的任何一个都可以匹配的话，那么你可以使用逗号分开这些查询。在下面的示例中，文本会在视口至少为400像素宽的时候<strong>或者</strong>设备处于横放状态的时候变为蓝色。如果其中的任何一项成立，那么查询就匹配上了。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">查看源代码</a>。</p> + +<h3 id="媒体查询中的“非”逻辑">媒体查询中的“非”逻辑</h3> + +<p>你可以用<code>not</code>操作符让整个媒体查询失效。这就直接反转了整个媒体查询的含义。因而在下面的例子中，文本只会在朝向为竖着的时候变成蓝色。</p> + +<pre class="brush: css notranslate"><code>@media not all and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">打开此示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">查看源代码</a>。</p> + +<h2 id="怎么选择断点">怎么选择断点</h2> + +<p>响应式设计的早期，许多设计者会尝试指向非常特定的屏幕尺寸。人们公布了流行的手机和平板的屏幕尺寸列表，以让设计者创建可以整齐地放在那些视口里面的设计。</p> + +<p>现在有多得多的设备，以及多种多样的尺寸，让这种事变得不再可行。这也就是说，将所有的设计用在特定的尺寸上以外，一个更好的方法是在内容某种程度上开始变得混乱的时候，改变尺寸的设计。也许线太长了，或者盒子状的外侧栏开始挤在一起而难以阅读。那就是你想要使用媒体查询，将设计变得对剩余可用空间更加友好的时候。这种方式意味着，它无关使用的设备的确切大小，每个范围都被照顾到了。引入媒体查询的点就叫做<strong>断点</strong>。</p> + +<p>火狐开发者工具中的<a href="/en-US/docs/Tools/Responsive_Design_Mode">响应式设计模式</a>能很好地帮助弄清楚断点应该设置在哪里。你能容易就能让视口变大和变小，然后看下可以在哪里加入媒体查询、调整设计，从而改善内容。</p> + +<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> + +<h2 id="主动学习：移动优先的响应式设计">主动学习：移动优先的响应式设计</h2> + +<p>泛泛地说，你可以采用两种方式实现响应式设计。你可以从桌面或者最宽的视图开始，然后随着视口变得越来越小，加上断点，把物件挪开；你也可以从最小的视图开始，随着视口变得越来越大，增添布局内容。第二种方式被叫做<strong>移动优先</strong>的响应式设计，很多时候是最值得仿效的做法。</p> + +<p>用在最小的那个设备上的视图很多时候都是一个简单的单列内容，很像正常文本流显示的那样。这意味着，你很可能不需要为小设备做多少布局设计，合适地安排下你的源代码，默认情况下你就可以得到可读的布局。</p> + +<p>下面的教程会领你用一个非常简单的布局熟悉这种方式。在生产站点上，你的媒体查询中可能会有更多的东西需要调整，但是它们的方法是完全一样的。</p> + +<h3 id="教程：一个简单的移动优先布局">教程：一个简单的移动优先布局</h3> + +<p>我们的起始点是一个HTML文档，上面应用了一些CSS，为布局的各部分加入了背景颜色。</p> + +<pre class="brush: css notranslate"><code>* { + box-sizing: border-box; +} + +body { + width: 90%; + margin: 2em auto; + font: 1em/1.3 Arial, Helvetica, sans-serif; +} + +a:link, +a:visited { + color: #333; +} + +nav ul, +aside ul { + list-style: none; + padding: 0; +} + +nav a:link, +nav a:visited { + background-color: rgba(207, 232, 220, 0.2); + border: 2px solid rgb(79, 185, 227); + text-decoration: none; + display: block; + padding: 10px; + color: #333; + font-weight: bold; +} + +nav a:hover { + background-color: rgba(207, 232, 220, 0.7); +} + +.related { + background-color: rgba(79, 185, 227, 0.3); + border: 1px solid rgb(79, 185, 227); + padding: 10px; +} + +.sidebar { + background-color: rgba(207, 232, 220, 0.5); + padding: 10px; +} + +article { + margin-bottom: 1em; +} +</code></pre> + +<p>我们没有改变过任何布局，但是文件的源代码是以让内容可读的方式排列的。这个开头是重要的，也是能够确保内容在由屏幕阅读器读出来的时候，让其可以理解的一步。</p> + +<pre class="brush: html notranslate"><code><body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">About</a></li> + <li><a href="">Contact</a></li> + <li><a href="">Meet the team</a></li> + <li><a href="">Blog</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>Veggies!</h1> + <p> + ... + </p> + </div> + <aside class="related"> + <p> + ... + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>External vegetable-based links</h2> + <ul> + <li> + ... + </li> + </ul> + </aside> + </main> + + <footer><p>&copy;2019</p></footer> + </div> + </body> +</code></pre> + +<p>这个简单的布局在移动端上也能表现得很好。如果我们在开发者工具中的响应式设计模式里面查看这个布局的话，我们可以看到，它作为一个直截了当的站点移动版布局来说，表现得相当优秀。</p> + +<p>在浏览器里<a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">打开步骤一</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">查看源代码</a>。</p> + +<p><strong>如果你想要在我们继续的时候，按步骤来并尝试这个示例，在你的电脑上建立一个<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a>的本地副本。</strong></p> + +<p>从这里开始，脱拽响应式设计的窗口，让它变得变得更宽，直到你看到一行变得非常长，有足够空间把导航栏放在一个水平行里面。这是我们加入第一个媒体查询的地方。我们将会使用em，因为这意味着，如果用户已经增加了文本的大小，断点会在行差不多也是这样长，但是视口更宽的时候产生；而文本更小的时候，视口也会更窄。</p> + +<p><strong>将下面的代码加到你的step1.html的CSS底部。</strong></p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 40em) { + article { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + nav ul { + display: flex; + } + + nav li { + flex: 1; + } +} +</code></pre> + +<p>这个CSS让我们的文章里面有了个两列布局，两栏分别是文章的内容和在aside元素中相关的信息。我们也已经用弹性盒把导航栏放在了一行里面。</p> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">打开步骤二</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">查看源代码</a>。</p> + +<p>让我们继续增加宽度，直到我们觉得这里有了足够多的空间来放置侧栏，再形成一列。在媒体查询中，我们会让main元素变成两栏网格。我们之后需要移除文章上的{{cssxref("margin-bottom")}}，让两个侧栏和彼此对齐，然后我们将会往页脚的顶部加上一个{{cssxref("border")}} 。一般来说，为了让设计看起来好看，这些小调整是你将会在每一个断点都需要做的。</p> + +<p><strong>再往你的step1.html的CSS的底部加入下面的代码：</strong></p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 70em) { + main { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + article { + margin-bottom: 0; + } + + footer { + border-top: 1px solid #ccc; + margin-top: 2em; + } +}</code> +</pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">打开步骤三</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">查看源代码</a>。</p> + +<p>如果你在不同的宽度下，看下最后的示例，你会看到设计是如何响应的，在可用的宽度下是如何表现为单栏、双栏或者三栏的。这是一个移动优先的响应式设计的非常简单的示例。</p> + +<h2 id="你真的需要媒体查询吗？">你真的需要媒体查询吗？</h2> + +<p>弹性盒、网格和多栏布局都给了你建立可伸缩的甚至是响应式组件的方式，而不需要媒体查询。这些布局方式能否在不加入媒体查询的时候实现你想要的设计，总是值得考虑的一件事。例如，你可能想要一组卡片，至少为二百像素宽，并在主文章里尽可能多地放下这些二百像素的卡片。这可以用网格布局实现，而完全不使用媒体查询。</p> + +<p>这可以由以下代码实现：</p> + +<pre class="brush: html notranslate"><code><ul class="grid"> + <li> + <h2>Card 1</h2> + <p>...</p> + </li> + <li> + <h2>Card 2</h2> + <p>...</p> + </li> + <li> + <h2>Card 3</h2> + <p>...</p> + </li> + <li> + <h2>Card 4</h2> + <p>...</p> + </li> + <li> + <h2>Card 5</h2> + <p>...</p> + </li> +</ul></code></pre> + +<pre class="brush: css notranslate"><code>.grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.grid li { + border: 1px solid #666; + padding: 10px; +}</code></pre> + +<p>在浏览器中<a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">打开网格布局示例</a>，或者<a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">查看源代码</a>。</p> + +<p>在你的浏览器里打开这个示例，让屏幕变宽变窄，看一看列轨数目的变化。这个方法里面的好事是，网格不是靠视口宽度判断的，而是可以容纳组件的宽度。对媒体查询这章节的建议就是，你可能根本不需要它！但是，实践中你会发现，由媒体查询改进的现代布局方式的恰当使用，将会产生最佳效果。</p> + +<h2 id="小试牛刀！">小试牛刀！</h2> + +<p>你已经到了此文的结尾，但是你能记住最重要的信息吗？你可以在继续之前，找一个测试来验证下你是否已经掌握了这些信息。见<a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">小试牛刀：响应式Web设计</a>。</p> + +<h2 id="小结">小结</h2> + +<p>本节课中，你已经学到了媒体查询的知识，也发现了如何在实践中使用它们，来建立一个移动优先的响应式设计。</p> + +<p>你可以使用我们已经建立的起始点，试出更多的媒体查询，例如，也许你能使用<code>pointer</code>媒体特征，在你探测到访客有一个模糊指针的时候，改变导航栏的大小。</p> + +<p>你还能通过加入不同的组件进行实验，看下加入媒体查询，或者使用类似弹性盒或者网格的布局方式，哪个是让组件可响应的最佳途径。经常是没有什么对错的，你应该实验下，看看哪个对你的设计和内容效果最好。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/multiple-column_layout/index.html b/files/zh-cn/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..c7a138adb3 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,413 @@ +--- +title: 多列布局 +slug: Learn/CSS/CSS_layout/Multiple-column_Layout +tags: + - 多列布局 + - 学习 + - 布局 + - 教程 + - 新手 + - 自动分列 +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", " Learn/CSS/CSS_layout/Responsive_Design ", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。 这篇文章介绍怎么使用这一特性。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>HTML 基础 (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), 和了解CSS如何工作的(study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>掌握在web页面中创建多列布局的方法?，正如你在一些报纸中看到的那样。 </td> + </tr> + </tbody> +</table> + +<h2 id="一个简单的例子">一个简单的例子</h2> + +<p>我们将学习怎么使用多列布局，通常也简写为 <em>multicol</em>。你可以从这里开始 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">downloading the multicol starting point file</a> 然后在合适的地方加入CSS。在这一小节的结尾，你可以看到最终代码的效果。</p> + +<p>我们从一些很简单的HTML开始； 用带有类 <code>container</code> 的简单包装，里面是标题和一些段落。</p> + +<p>带有 <code>.container</code> 的 {{htmlelement("div")}} 将成为我们 multicol 的容器。 通过这两个属性开启 multicol {{cssxref("column-count")}} 或者 {{cssxref("column-width")}}。 <code>column-count</code> 将创建指定数量的列，所以如果你把下面的CSS加到样式表里让后重载入页面，你将得到3列：</p> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> + +<p>创建的这些列具有弹性的宽度 — 由浏览器计算出每一列分配多少空间。</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="column-count_example">column-count example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + </pre> +</div> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p> + +<p>像下面这样使用 <code>column-width</code> 更改CSS：</p> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> + +<p>浏览器将按照你指定的宽度尽可能多的创建列；任何剩余的空间之后会被现有的列平分。 这意味着你可能无法期望得到你指定宽度，除非容器的宽度刚好可以被你指定的宽度除尽。</p> + +<div id="Multicol_2"> +<div class="hidden"> +<h6 id="column-width_example">column-width example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p> + +<h2 id="给多列增加样式">给多列增加样式</h2> + +<p>Multicol 创建的列无法单独的设定样式。 不存在让单独某一列比其他列更大的方法，同样无法为某一特定的列设置独特的背景色、文本颜色。你有两个机会改变列的样式：</p> + +<ul> + <li>使用 {{cssxref("column-gap")}} 改变列间间隙。</li> + <li>用 {{cssxref("column-rule")}} 在列间加入一条分割线。</li> +</ul> + +<p>以上面的代码为例，增加 <code>column-gap</code> 属性可以更改列间间隙：</p> + +<pre class="brush: css">.container { + column-width: 200px; + column-gap: 20px; +}</pre> + +<p>你可以尝试不同的值 — 该属性接受任何长度单位。现在再加入 <code>column-rule</code>。和你之前遇到的 {{cssxref("border")}} 属性类似， <code>column-rule</code> 是 {{cssxref("column-rule-color")}} 和 {{cssxref("column-rule-style")}}的缩写，接受同 <code>border</code> 一样的单位。</p> + +<pre class="brush: css">.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<p>尝试设置不同的样式和颜色。</p> + +<div id="Multicol_3"> +<div class="hidden"> +<h6 id="Styling_the_columns">Styling the columns</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} +.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>Simple multicol example</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p> + +<p>值得一提的是这条分割线本身并不占用宽度。它置于用 <code>column-gap</code> 创建的间隙内。如果需要更多空间，你需要增加 <code>column-gap</code> 的值。</p> + +<h2 id="列与内容折断">列与内容折断</h2> + +<p>多列布局的内容被拆成碎块。 和多页媒体上的内容表现大致一样 — 比如打印网页的时候。 当你把内容放入多列布局容器内，内容被拆成碎块放进列中，内容折断（译者注：比如断词断句）使得这一效果可以实现。</p> + +<p>有时，这种折断内容会降低阅读体验。在下面的举例中，我用 multicol 对一系列盒子布局，每一小块里有小标题和和一些文字。标题和文字可能被折断点拆开，从而降低阅读体验。</p> + +<div id="Multicol_4"> +<div class="hidden"> +<h6 id="Cards_example">Cards example</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> +</div> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> + +<p>我们可以使用 <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> 中声明的属性控制这一特性。 这份规范提供了一些属性来控制 multicol 和多页媒体中的内容拆分、折断。比如， 在规则 <code>.card</code> 上添加属性{{cssxref("break-inside")}}，并设值 <code>avoid</code> 。<code>.card</code> 是标题和文本的容器，我们不想拆开这个盒子。</p> + +<p>现阶段，增加旧属性 <code>page-break-inside: avoid</code> 能够获得更好的浏览器支持。</p> + +<pre class="brush: css">.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 0 0 1em 0; +} +</pre> + +<p>刷新页面，你的盒子就会呆在一起了。</p> + +<div id="Multicol_5"> +<div class="hidden"> +<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>I am the heading</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> +</div> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p> + +<h2 id="小结">小结</h2> + +<p>现在你知道多列布局的基本用法了，构建页面时又多了一种布局选择。</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Using multi-column layouts</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">CSS 介绍</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流（Normal Flow）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子（Flexbox）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格（Grid）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动（Floats）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位（Positioning）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局（Multiple-column Layout）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统的布局实现（Legacy Layout Methods）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧有浏览器（Supporting older browsers）</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/normal_flow/index.html b/files/zh-cn/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..362c46ddf3 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,98 @@ +--- +title: 正常布局流 +slug: Learn/CSS/CSS_layout/Normal_Flow +tags: + - 浮动 + - 网格布局 +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">这篇文章介绍正常的流布局，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>HTML 基础 (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), 和了解CSS如何工作的(study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>在做出改动之前，能够解释浏览器默认的布局方式.</td> + </tr> + </tbody> +</table> + +<p>如上小节对布局的介绍，如果你未曾应用任何CSS规则来改变它们的展现方式，网页上的元素将会按照正常布局流来组织。同样的，开始探索前，你可以通过调整元素位置，或者完全的移除元素来改变它们的表现效果。从一副简单的、结构良好并且在正常布局流下仍然易读的文档开始，是上手任何页面的最佳方式（译者注：几乎没有很简单的CSS，标签组织符合一般用法）。这样确保了你的内容的易读性，即便用户使用受限的浏览器或者屏幕阅读设备（译者注：比如有些老旧浏览器对某些CSS特性的支持不理想，或者有用户自定义CSS样式）。此外，由于正常布局流的设计初衷在于构建易读、合理的文档，遵循这样的指引原则，你在对布局做出改动时应该是与文档协同，而不是与之对抗。</p> + +<p>在深入探索不同的布局方式之前， 你最好回顾下在之前模块学习到的关于正常布局流的知识点（译者注：比如position display float table flex-box grid-layout）.</p> + +<h2 id="默认情况下，元素是如何布局的？">默认情况下，元素是如何布局的？</h2> + +<p>首先，取得元素的内容来放在一个独立的元素盒子中，然后在其周边加上内边距、边框和外边距 --- 就是我们之前看到的盒子模型。</p> + +<p>默认的，一个<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements">块级元素</a>的内容宽度是其父元素的100%，其高度与其内容高度一致。<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements">内联元素</a>的height width与内容一致。你无法设置内联元素的height width --- 它们就那样置于块级元素的内容里。 如果你想控制内联元素的尺寸，你需要为元素设置<code>display: block;</code> （或者，<code>display: inline-block;</code> inline-block 混合了inline 和 block的特性。)</p> + +<p>这样解释了独立元素的布局，但是元素之间又是如何相互影响的呢？ 正常布局流（在布局介绍里提到过）是一套在浏览器视口内放置、组织元素的系统。默认的，块级元素按照基于其父元素的<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">书写顺序</a>(<em>默认值:</em> horizontal-tb)的<em>块流动方向(block flow direction)</em>放置 --- 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。</p> + +<p>内联元素的表现有所不同 --- 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。</p> + +<p>如果两个相邻的元素都设置了margin 并且两个margin有重叠，那么更大的设置会被保留，小的则会消失 --- 这被称为外边距叠加，我们之前见到过。</p> + +<p>我们来看一个对全部这些做出解释的简单例子：</p> + +<div id="Normal_Flow"> +<pre class="brush: html notranslate"><h1>Basic document flow</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> + +<h2 id="小结">小结</h2> + +<p>现在你对正常布局流有所了解，知晓浏览器默认怎么组织元素，继续下一节，学习如何改变默认布局以产出符合你的设计的布局。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在这个模块中">在这个模块中</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">CSS 介绍</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流（Normal Flow）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子（Flexbox）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格（Grid）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动（Floats）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">位置（Positioning）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局（Multiple-column Layout）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南 </a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统的布局实现（Legacy Layout Methods）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧有浏览器（Supporting older browsers）</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">评估你对布局的理解</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/position_skills/index.html b/files/zh-cn/learn/css/css_layout/position_skills/index.html new file mode 100644 index 0000000000..63c8a8f01a --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/position_skills/index.html @@ -0,0 +1,70 @@ +--- +title: 'Test your skills: position' +slug: Learn/CSS/CSS_layout/Position_skills +tags: + - Position + - 定位 + - 布局 +translation_of: Learn/CSS/CSS_layout/Position_skills +--- +<div></div> + +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>此任务的目的是让您使用在我们的position课程中介绍的CSS {{CSSxRef("position")}}属性以及对应值，您将通过两个小任务来复习刚才课程材料中介绍的不同元素。</p> + +<div class="blockIndicator note"> +<p><strong>小贴士</strong>: 您可以在下面的交互式编辑器中尝试解决方案，下载代码并使用在线工具（如CodePen、jsFiddle或Glitch）处理任务可能会有帮助。</p> + +<p>如果您遇到困难，请向我们寻求帮助-请参阅本页底部的 {{anch("Assessment or further help")}} 部分</p> +</div> + +<h2 id="定位练习一">定位练习一</h2> + +<p>在这项任务中，您需要将目标类别为5px灰色边框的元素定位到外部容器的右上角。</p> + +<p><img alt="The green box is at the top right of a container with a grey border." src="https://mdn.mozillademos.org/files/17077/position-task1.png" style="height: 661px; width: 1033px;"></p> + +<p>尝试更改下面的代码示例，重新完成的上述任务：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}</p> + +<p>作为一个额外的挑战，你能改变目标元素显示在文本下面吗？</p> + +<div class="blockIndicator note"> +<p>为了评估和进一步编辑,<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">下载源代码</a>在本地编辑器或在线编辑器中编辑</p> +</div> + +<h2 id="定位练习二">定位练习二</h2> + +<p>在下面的示例中，滚动条滚动时侧边栏将随内容一起滚动。更改它使滚动条滚动时侧边栏保持原位并且只滚动内容。</p> + +<p><img alt="The content is scrolled but the sidebar has stayed in place." src="https://mdn.mozillademos.org/files/17078/position-task2.png" style="height: 827px; width: 1123px;"></p> + +<p>尝试更改下面的代码示例，重新完成的上述任务：</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p>为了评估和进一步编辑,<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">下载源代码</a>在本地编辑器或在线编辑器中编辑</p> +</div> + +<h2 id="Assessment_or_further_help">Assessment or further help</h2> + +<p>You can practice these examples in the Interactive Editors mentioned above.</p> + +<p>If you would like your work assessed, or are stuck and want to ask for help:</p> + +<ol> + <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> + <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include: + <ul> + <li>A descriptive title such as "Assessment wanted for Position skill test 1".</li> + <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> + <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> + <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> + </ul> + </li> +</ol> diff --git a/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.html b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..61da887ea2 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,418 @@ +--- +title: 定位实例练习 +slug: Learn/CSS/CSS_layout/Practical_positioning_examples +tags: + - 选项卡 +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">掌握了上一篇文章中的定位的基础知识，我们将着眼于实现一些现实中的例子，来演示你能用定位来做什么。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row"> + <p>预备知识：</p> + </th> + <td> + <p>HTML基础(学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>),和CSS怎么工作的 (学习<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</p> + </td> + </tr> + <tr> + <th scope="row"> + <p>目标：</p> + </th> + <td> + <p>了解定位的实例</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="列表消息盒子">列表消息盒子</h2> + +<p>我们研究的第一个例子是一个经典的选项卡消息框，你想用一块小区域包括大量信息时，一个非常常用的特征。这包括含有大信息量的应用，比如策略战争游戏，比如从移动版的网页，屏幕狭小、空间有限；比如你可能想要放置许多信息的紧凑消息框，不用就会充满整个UI。我们简单的例子完成后就会像下面这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<div class="note"> +<p><strong>注意：</strong>你能看完整的示例，可运行在 <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>)。检出它以理解你在本文章里要建立什么。</p> +</div> + +<p>你可能会想：”为什么不仅仅做独立的选项卡为一个独立的网页，然后通过点击不同的标签来在不同的页面跳转来达到这个效果？“这样代码可能会简单一些，是的。但是这样每个独立的”页面“视图将会实际上是一个新加载的网页，跨视图更难保存信息，并把这个特征融入一个更大的UI设计。另外，所谓的”单页应用“正在变得非常流行——尤其是移动网页UI——因为把一切的服务放在一个单独的文件上可以减少HTTP请求的数量来浏览所有内容，从而提高性能。</p> + +<div class="note"> +<p><strong>注意：</strong>一些网络开发者甚至更超前，每次只加载一页的信息，并且使用JavaScript诸如 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>特征动态改变信息显示。但是，在你此时的学习中，我们希望尽可能保持简单。接下来会有一些JavaScript，但是只有一点。</p> +</div> + +<p>在开始之前，我们需要你拷贝文件到本地，当作起始的HTML文件—— <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. 保存到你的计算机合适的位置，然后在你的编辑器里打开。让我们看看包含在 body 里的HTML代码：</p> + +<pre class="brush: html"><section class="info-box"> + <ul> + <li><a href="#" class="active">Tab 1</a></li> + <li><a href="#">Tab 2</a></li> + <li><a href="#">Tab 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>The first tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>The second tab</h2> + + <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p> + </article> + <article> + <h2>The third tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p> + + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section></pre> + +<p>这样我们已经得到了一个{{htmlelement("section")}}元素带有类（<code>class</code>）为 <code>info-box</code>。此元素又包含一个 {{htmlelement("ul")}} 和一个 {{htmlelement("div")}}。无序列表包含三个列表项，列表项有链接在内，实际上将成为用于点击后显示内容面板的选项卡。 <code>div</code> 包含三个{{htmlelement("article")}} 元素，构成对应于每个选项卡的内容面板。 每个面板包含一些示例内容。</p> + +<p>这里的思路是我们将样式化选项卡看起来是一个标准的水平导航菜单，使用绝对定位样式化面板互相坐落其顶上。我们也给你一点JavaScript包含到你的页面上，当选项卡被按下时，显示对应的面板，并且样式化选项卡本身。你不需要在这个阶段了解JavaScript本身，但是你应该尽快学习一些基本的 <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a>——你的用户界面越复杂，越需要一些JavaScript来实现你渴望的功能。</p> + +<h3 id="一般设置">一般设置</h3> + +<p>开始前，在{{HTMLElement("style")}}开闭标签之间添加下面的代码：</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +}</pre> + +<p>这只是一些一般设置，在我们页面上设置了无衬线的字体、使用 {{cssxref("box-sizing")}} 模型，去掉 {{htmlelement("body")}} 默认外边距。</p> + +<p>下一步，在你早先的CSS下面加入如下代码：</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + margin: 0 auto; +}</pre> + +<p>这对内容设置具体的高度和宽度、在屏幕居中使用老把戏 <code>margin: 0 auto</code> 。在早先的课程中我们建议尽可能不固定内容容器的高度。这个情况下是可以的，因为我们是在选项卡中固定的内容，如果每个标签都有不同的高度，看起来也有些不和谐。</p> + +<h3 id="样式化我们的选项卡">样式化我们的选项卡</h3> + +<p>现在我们希望样式化选项卡看上去像选项卡——基本，这些是一个水平的导航标签，但不是点击之后加载不同的网页，和我们之前在课程中见到的不同，相反，他们在同一页面上显示不同的面板。首先，在你的CSS底部添加下列规则，从无序列表中移除默认的{{cssxref("padding-left")}}和{{cssxref("margin-top")}}值：</p> + +<pre class="brush: css">.info-box ul { + padding-left: 0; + margin-top: 0; +}</pre> + +<div class="note"> +<p><strong>注意：</strong>我们正在使用后代选择器，整个例子 <code>.info-box</code> 都位于链的开始——这样页面已经带有其他内容时，我们可以插入这个特征，不害怕与应用于页面其他部分的样式冲突。</p> +</div> + +<p>接下来，我们将样式化水平选项卡——列表项都要左浮动确保他们一行合起来，他们的{{cssxref("list-style-type")}}被设置为 <code>none</code> 用以去除项目符号，宽度（{{cssxref("width")}}）设置为 <code>150px</code> 以便于适应这个info-box。链接（ {{htmlelement("a")}} ）元素设置为{{cssxref("display")}} inline-block，这样他们将在一行显示，仍然保持样式可设置，他们会被样式化合适的选项卡按钮，通过一系列的其他属性。</p> + +<p>添加下列的CSS：</p> + +<pre class="brush: css">.info-box li { + float: left; + list-style-type: none; + width: 150px; +} + +.info-box li a { + display: inline-block; + text-decoration: none; + width: 100%; + line-height: 3; + background-color: red; + color: black; + text-align: center; +}</pre> + +<p>最后，对于本节，我们将会在链接状态上设置一些样式。首先，我们要设置标签的 <code>:focus</code> 和 <code>:hover</code> 状态，让他们在获得焦点/鼠标悬浮的时候看起来不同，给用户提供一些可视化反馈。其次，当某个选项卡的类（ <code>class</code> ）出现 <code>active</code> 时，我们为其设置一条相同的样式规则。我们将通过使用JavaScript来设置，当一个标签被点击时。把这些CSS放置在你的其他样式后面：</p> + +<pre class="brush: css">.info-box li a:focus, .info-box li a:hover { + background-color: #a60000; + color: white; +} + +.info-box li a.active { + background-color: #a60000; + color: white; +}</pre> + +<h3 id="样式化面板">样式化面板</h3> + +<p>下一步工作是样式化我们的面板，现在开始吧！</p> + +<p>首先，添加下列的规则去样式化 <code>.panels</code> {{htmlelement("div")}} 容器。我们简单的设置一个固定的高度，确保面板包含在info-box里面，{{cssxref("position")}} <code>relative</code> 设置 {{htmlelement("div")}} 为定位上下文，这样你能然后相对自身放置定位子元素，而不是相对{{htmlelement("html")}}元素，最后我们清除（{{cssxref("clear")}}）浮动，设置在上面CSS中，这样避免影响布局的剩余部分。</p> + +<pre class="brush: css">.info-box .panels { + height: 352px; + position: relative; + clear: both; +}</pre> + +<p>在本节的最后，我们将对包含我们面板的单独 {{htmlelement("article")}} 元素设置样式。我们添加的第一条规则就是绝对定位面板，让他们都位于{{htmlelement("div")}}容器的左上角——这一部分对整个布局特性是关键的，就像使面板互相位于顶部。规则设置面板为和容器同样的高度，给内容一些内边距，设置字体颜色（{{cssxref("color")}}），和背景颜色（{{cssxref("background-color")}}）。</p> + +<p>我们将添加的第二条规则，对带有类（ <code>class</code> ）为（ <code>active-panel</code> ）的面板，设置{{cssxref("z-index")}} 为 1，会让他位于其他的面板之上（默认定位元素 <code>z-index</code> 的值是 0，会使默认元素位于下面）。同样的，我们会在合适的时候用JavaScript 来添加这个类。</p> + +<pre class="brush: css">.info-box article { + position: absolute; + top: 0; + left: 0; + height: 352px; + padding: 10px; + color: white; + background-color: #a60000; +} + +.info-box .active-panel { + z-index: 1; +}</pre> + +<h3 id="添加我们的JavaScript">添加我们的JavaScript</h3> + +<p>让这些特性工作的最后一步是添加一些JavaScript。添加下列一块代码，准确的写在你的开始和结束的{{htmlelement("script")}}标签之间（在接下来的HTML内容中你将会发现这些）：</p> + +<pre class="brush: js">var tabs = document.querySelectorAll('.info-box li a'); +var panels = document.querySelectorAll('.info-box article'); + +for(i = 0; i < tabs.length; i++) { + var tab = tabs[i]; + setTabHandler(tab, i); +} + +function setTabHandler(tab, tabPos) { + tab.onclick = function() { + for(i = 0; i < tabs.length; i++) { + if(tabs[i].getAttribute('class')) { + tabs[i].removeAttribute('class'); + } + } + + tab.setAttribute('class', 'active'); + + for(i = 0; i < panels.length; i++) { + if(panels[i].getAttribute('class')) { + panels[i].removeAttribute('class'); + } + } + + panels[tabPos].setAttribute('class', 'active-panel'); + } +}</pre> + +<p>这些代码做了如下工作：</p> + +<ul> + <li>首先我们保存所有的选项卡和所有的面板引用到两个变量中，名为 <code>tabs</code> 和 <code>panels</code>，这样此后我们可以容易地为它们做事。</li> + <li>然后我们使用 <code>for</code> 循环遍历所有的选项卡，并且在每一个上运行叫做<code>setTabHandler()</code> 的函数，此函数建立当每个选项卡被点击时应该发生的功能。 运行时， 函数会被传递选项卡，和一个索引数<code>i</code> 指明选项卡在<code>tabs</code> 数组中的位置。</li> + <li>在 <code>setTabHandler()</code> 函数中，这个标签创建了一个 <code>onclick</code> 事件来处理点击，所以当标签被点击的时候，接下来会发生： + <ul> + <li>用一个 <code>for</code> 循环清除所有标签当前存在的类。</li> + <li>当点击的时候在标签上创建了一个 <code>active</code> 类——从相关联的元素中继承了CSS的一些属性，具有和panels的样式相同的 {{cssxref("color")}} 和 {{cssxref("background-color")}}。</li> + <li>用一个 <code>for</code> 循环清除所有面板当前存在的类。</li> + <li>当标签被点击的时候在和标签相对应的面板上创建了一个 <code>active-panel</code> 类——从相关联的元素中继承了CSS的一些属性，使其 {{cssxref("z-index")}} 属性被设置为1，让它能位于所有的面板的上面。</li> + </ul> + </li> +</ul> + +<p>这是第一个例子，保持你的代码打开，我们将会在第二个例子中继续添加。</p> + +<h2 id="一个固定位置的列表消息盒子_2">一个固定位置的列表消息盒子</h2> + +<p id="一个固定位置的列表消息盒子">在我们的第二个例子中，我们将会采用我们的第一个例子——我们的消息盒子——把她加到一个满的网页之中去。但是不仅仅是这样——我们将固定她的位置，以便于他能待在浏览器窗口的同一个位置。当主要内容滚动时，这个消息盒子将会待在屏幕的同一个位置。完成的例子：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p> + +<div class="note"> +<p><strong>注意</strong>：你可以点击<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">蓝字</a>预览完成后的效果，看看哪些部分是你在这篇文章里你要制作的。</p> +</div> + +<p>在开始的时候，你可以使用第一部分中完成的例子，或者从我们的Github仓库中拷贝 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> 到本地。</p> + +<h3 id="添加HTML">添加HTML </h3> + +<p>首先，我们需要一些额外的内容在当前的主内容中。添加下列{{htmlelement("section")}} 在你的 {{htmlelement("body")}} 标签之中，放在在已存在的部分之中：</p> + +<pre class="brush: html"><section class="fake-content"> + <h1>Fake content</h1> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> +</section></pre> + +<div class="note"> +<p><strong>注意</strong>：你可以随意更改假的内容，替换为你想要的真的内容。</p> +</div> + +<h3 id="更改存在的CSS">更改存在的CSS</h3> + +<p>接下来我们需要对之前的 CSS 进行一些小修改，让消息盒子放置和定位更好。删除margin: 0 auto （不需要居中显示），添加fixed定位；调整top 属性把它粘在浏览器的视域。</p> + +<p>它应该看起来像下面这样：</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + position: fixed; + top: 0; +}</pre> + +<h3 id="对主内容样式设计">对主内容样式设计</h3> + +<p>对于这个例子来说唯一剩下的事情就是给主内容提供一些样式设计。添加下面的规则到你剩下的 CSS 的下面：</p> + +<pre class="brush: css">.fake-content { + background-color: #a60000; + color: white; + padding: 10px; + height: 2000px; + margin-left: 470px; +}</pre> + +<p>开始我们给这个内容和消息盒子面板一样的背景颜色，颜色，内边距。然后给他一个大的margin-left使他移动到右边，为消息盒子在左边腾出位置，以便于各个部分不重叠。</p> + +<p>这标志着第二个例子的结束；我们希望你能感到第三个例子，完全是因为兴趣。</p> + +<h2 id="一个滑动隐藏的面板_2">一个滑动隐藏的面板</h2> + +<p id="一个滑动隐藏的面板">最后一个我们在这里介绍的例子是通过按图标使面板滑动出现或者消失——就像前面提到的，这种场景在移动端的布局很流行，因为移动端的屏幕很小，所以你不希望使用大部分界面来显示一个有用的内容而是用消息面板或者菜单代替。</p> + +<p>我们完工后的例子长这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p> + +<div class="note"> +<p><strong>注意</strong>：你可以点击<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">蓝字</a>预览完成后的效果，仔细看看哪些部分是你在这篇文章里你要制作的。</p> +</div> + +<p>在一开始，老规矩在我们的Githib代码仓库拷贝<a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hideen-info-panel-start.html</a>(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">源码</a>)。这个例子并没有用先前的例子，所以我们需要一个新的开始文件。让我们来仔细观察一下这个HTML文件：</p> + +<pre class="brush: css"><label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> + + ... + +</aside></pre> + +<p>开始，我们看到了一个 {{htmlelement("label")}} 元素和 {{htmlelement("input")}} 元素——<code><label></code>元素普遍用来联系文字标签和表单，目的是能更好的理解表单（允许屏幕阅读器用户查看表单元素的描述）。这里通过<code>for</code>属性绑定<code>id</code>到了<code><input></code>标签的checkbox元素。</p> + +<div class="note"> +<p><strong>注意</strong>：我们已经设置了一个特殊的问题标记特性到我们的HTML中，来当作我们的信息图标——这代表着这个按钮将可以按下显示或隐藏面板。</p> +</div> + +<p>现在我们将这些元素用于稍微不同的目的——另一个 <code><label></code> 标签有用的副作用使你能通过点击checkbox的label标签来选择这个checkbox，就好像点击了这个checkbox自己一样。这就会实现有名的 <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a> 技术，可以提供无 JavaScript 的方法来通过按钮来控制一个元素。我们将通过其他两个元素控制 {{htmlelement("aside")}} 元素。（为了简洁起见，我们已将其内容从上述代码列表中删除）。</p> + +<p>在下面的部分我们将解释这一切如何运作。</p> + +<h3 id="设置表单元素样式">设置表单元素样式</h3> + +<p>首先让我们处理表单元素 - 在 {{htmlelement("style")}} 标签之间添加以下CSS：</p> + +<pre class="brush: css">label[for="toggle"] { + font-size: 3rem; + position: absolute; + top: 4px; + right: 5px; + z-index: 1; + cursor: pointer; +} + +input[type="checkbox"] { + position: absolute; + top: -100px; +}</pre> + +<p>第一条规则样式化 <code><label></code> 标签；我们：</p> + +<ul> + <li>设置更大的 {{cssxref("font-size")}} 使图标更大更美观。</li> + <li>设置 {{cssxref("position")}} 为 <code>absolute</code>，使用 {{cssxref("top")}} 属性和 {{cssxref("right")}} 属性来让他能很合适的位于右上角。</li> + <li>设置其 {{cssxref("z-index")}} 为1——因此当信息面板被赋予样式和显示的时候，不会覆盖我们的图标；相反图标依然会位于最上层能够再次被按下来隐藏信息平板。</li> + <li>使用 {{cssxref("cursor")}} 属性来改变鼠标的指针，当鼠标悬浮在图标上面的时候变成一个手形指针（就像你看到的当悬浮在链接上一样），作为一个额外的可视化线索告诉用户这个图标可以做一些有趣的事情。</li> +</ul> + +<p>第二条规则是在实际的 <code><input></code> 元素的checkbox 上设置{{cssxref("position")}} 属性为 <code>absolute</code>，并从屏幕上方隐藏掉它，我们并不希望在我们的用户界面里看到它。</p> + +<h3 id="设置面板的样式">设置面板的样式</h3> + +<p>现在是时候为实际的滑动面板设计风格了。在你的css底部添加下列规则：</p> + +<pre class="brush: css">aside { + background-color: #a60000; + color: white; + + width: 340px; + height: 98%; + padding: 10px 1%; + + position: fixed; + top: 0; + right: -370px; + + transition: 0.6s all; +}</pre> + +<p>这里有很多项——让我们一点一点讨论：</p> + +<ul> + <li>首先，我们在信息盒子中设置了一些简单的 {{cssxref("background-color")}} 和 {{cssxref("color")}}。</li> + <li>然后，我们在面板上设置一个固定的 {{cssxref("width")}} ，让它的 {{cssxref("height")}} 充满整个浏览器窗口的视口。</li> + <li>我们同样包括一些 {{cssxref("padding")}} 来组成我们想要的总的高度和宽度的值（如果我们没有设置 <code>box-sizing: border-box;</code> ，那就很有必要，正如这个例子）</li> + <li>然后，我们在面板上设置 {{cssxref("position")}}<code>: fixed;</code>，即使页面的内容在滚动，也总是显示在同一个位置。我们设置 {{cssxref("top")}} 属性，使其粘在视口顶部，设置 {{cssxref("right")}} 属性使其默认情况下位于屏幕的右边。</li> + <li>最后我们在元素上设置 {{cssxref("transition")}} 属性，Transitions是一个有意思的特性，允许你在状态改变的时候平滑的过渡，而不是粗暴的“开”或“关”。在这个例子中我们尝试在checkbox被选中时让面板平滑的滚动。（或者换句话说，当问题标记图标被点击以后——记住，点击 <code><label></code> 标签也会选择相对应的checkbox！我们已经告诉你这是一种hack了）你也将会学到更多……</li> +</ul> + +<h3 id="设置选择后的状态">设置选择后的状态</h3> + +<p>这是最后要添加的一点 CSS ——把这些放到你的 CSS 底部:</p> + +<pre class="brush: css">input[type=checkbox]:checked + aside { + right: 0px; +}</pre> + +<p>这里的选择器是复杂的——我们选择与 <code><input></code> 元素邻接的 <code><aside></code> 元素，但是仅仅在它被选择时（请注意使用 {{cssxref(":checked")}} 伪类来实现此目的），在这种情况下，我们将 <code><aside></code> 的 {{cssxref("right")}} 属性设置为0px，会造成面板再次出现在屏幕上（由于过渡属性会平滑的出现）。再一次点击这个标签会取消选中checkbox，面板将会跟着再一次消失。</p> + +<p>所以你有 ——一个相当巧妙的避免使用JavaScript来创建一个切换按钮效果方式。 这将在IE9及以上版本中起作用（平滑过渡将在IE10及更高版本中起作用）。这种效果确实有一些问题 ——这是有点滥用表单元素（它们不是为了这个目的），并且在可访问性方面效果不是很好——标签在默认情况下不可聚焦，并且表单元素的非语义使用可能会导致屏幕朗读器出现问题。 JavaScript和链接或按钮可能更合适，但这样的实验仍然很有趣。</p> + +<h2 id="总结">总结</h2> + +<p>这样完成了我们对定位的关注——现在，你应该理解基本机制的工作原理，同样理解了怎样应用这些知识去构建一些有趣的用户界面功能，不要由于你还未完全理解所有的知识而担心——定位是一个相当高级的话题，你可以随时读这篇文章来帮助你的理解。下一个主题我们将转向Flexbox。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/responsive_design/index.html b/files/zh-cn/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..50f16d2923 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,324 @@ +--- +title: 响应式设计 +slug: Learn/CSS/CSS_layout/Responsive_Design +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>早年设计Web时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（<em>responsive web design，RWD</em>），RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想，在这篇文章里，我们将会帮你理解掌握它时所需知道的主要技能。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML基础（学习<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>），以及对CSS工作方式的理解（学习<a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>和<a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解响应式设计的基础概念以及历史</td> + </tr> + </tbody> +</table> + +<h2 id="历史上的网站布局">历史上的网站布局</h2> + +<p>在历史上的某个时刻，设计网站时，你有两个选择：</p> + +<ul> + <li>你可以创建一个“液态”站点，它会拉伸以充满整个浏览器视窗；</li> + <li>或者是一个“固定宽度”站点，它有一个以像素计的固定尺寸。</li> +</ul> + +<p>这两种途径会倾向于导致它的表现只有在设计者的屏幕上才是最佳的！液态站点导致了小屏幕上的设计会挤成一团（如下所示），以及大屏幕上难以阅读的很长的行长度。</p> + +<figure><img alt="A layout with two columns squashed into a mobile size viewport." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>看一下这个简单的流式布局：<a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">源代码</a>。当查看示例时，来回拖拽你的浏览器窗口，改变其大小，看下不同尺寸下的显示情况。</p> +</div> + +<p>固定宽度站点的一个可能的后果是，在比站点更窄的屏幕上会出现一个水平滚动条（如下所示），在大屏幕上的设计边缘还会有许多空白。</p> + +<figure><img alt="A layout with a horizontal scrollbar in a mobile viewport." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>看下这个简单的固定宽度布局：<a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">源代码</a>，重新观察一下你调整浏览器窗口大小后的结果。</p> +</div> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>上面的截屏是在火狐开发者工具的<a href="/en-US/docs/Tools/Responsive_Design_Mode">响应式设计模式</a>中截取的。</p> +</div> + +<p>随着移动Web在早期的功能手机上开始成为现实，希望拥抱移动端的公司普遍希望为他们的网站创建一个有着不同的网址的移动版本（大多是像<em>m.example.com</em>或者<em>example.mobi</em>这类）。这意味着一个网站需要开发两个分开的版本，而且要保持时效性。</p> + +<p>除此以外，这些移动网站的体验经常缩水。由于移动设备变得更加强大，足以显示完整的网站，对于那些被困在移动版网站的移动端用户来说，这是很折磨人的，他们因此也没法获取他们知道在支持所有功能的桌面版网站上能找到的信息。</p> + +<h2 id="响应式设计之前的灵活布局">响应式设计之前的灵活布局</h2> + +<p>人们开发了许多方式，尽力解决建设网站时使用液态和固定宽度的方式所带来的弊端。2004年，Cameron Adams写了一篇题为《<a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>》的帖子，描述了一种可以创造适应多种屏幕分辨率的设计的方式。这种方式需要JavaScript来探测屏幕的分辨率，载入恰当的CSS。</p> + +<p>Zoe Mickley Gillenwater深刻影响了<a href="http://zomigi.com/blog/voices-that-matter-slides-available/">她的著作</a>，在里面描述并标准化了可变站点建立的不同方式，试图在充满屏幕和完全保持固定尺寸之间找到最佳平衡。</p> + +<h2 id="响应式设计">响应式设计</h2> + +<p>“响应式设计”这个词是<a href="https://alistapart.com/article/responsive-web-design/">Ethan Marcotte在2010年首度提出的</a>，他将其描述为三种技术的混合使用。</p> + +<ol> + <li>第一个是液态网格，这早先已由Gillenwater进行探讨，可以在Marcotte的文章《<a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a>》（出版于2009年的《A List Apart》上）中读到。</li> + <li>第二个是<a href="http://unstoppablerobotninja.com/entry/fluid-images">液态图像</a>的理念。通过使用相当简单的将设置<code>max-width</code>属性设置为<code>100%</code>的技术，图像可以在包含它们的列变得比图像原始尺寸窄的时候，缩放得更小，但总不会变得更大。这使得图像可以被缩放，以被放到一个灵活尺寸的列，而不是溢出出去，同时也不会在列宽于图像的时候，使图像变得太大以至于画质变得粗糙。</li> + <li>第三个关键的组件是<a href="/en-US/docs/Web/CSS/Media_Queries">媒体查询</a>。媒体查询使以往Cameron Adams探讨过的、由JavaScript实现的布局类型切换，可以只使用CSS实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。</li> +</ol> + +<p>需要你理解的很重要的一点是<strong>响应式Web设计不是单独的技术</strong>，它是描述Web设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以<strong>响应</strong>查看内容的设备的样式的一个词。在Marcotte's原来的探索中，这意味着灵活网格（使用float）和媒体查询，但是在这篇文章写就的几乎十年以后，Web的响应式工作已经成为了默认做法。现代的CSS布局方式基本上就是响应式的，而且我们在Web平台上内置了新的东西，使得设计响应式站点变得容易。</p> + +<p>这篇文章的余下部分会为你指出，在建立响应式站点的时候，你可能会用到的各式Web平台的特色功能。</p> + +<h2 id="媒介查询">媒介查询</h2> + +<p>响应式设计仅仅是因为媒介查询才新兴起来的。媒介查询第三级规范已经在2009年成为了候选推荐，这意味着它可视为准备好在浏览器中开始支持了。媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将CSS选择性地适应用户的需要应用在样式化页面上。</p> + +<p>例如，下面的媒体查询进行测试，以知晓当前的Web页面是否被展示为屏幕媒体（也就是说不是印刷文档），且视口至少有800像素宽。用于<code>.container</code>选择器的CSS将只会在这两件前提存在的情况下应用。</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>你可以在一张样式表上加入多条媒体查询，调整整个页面或者部分页面以达到适应各式屏幕尺寸的最佳效果。媒体查询，以及样式改变时的点，被叫做<em>断点</em>（breakpoints）。</p> + +<p>使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局 。这经常被描述为<strong>移动优先</strong>设计。</p> + +<p>在MDN文档中的<a href="/en-US/docs/Web/CSS/Media_Queries">媒体查询</a>中了解更多</p> + +<h2 id="灵活网格">灵活网格</h2> + +<p>响应式站点不只是在断点之间改变它们的布局，它们是建立在灵活网格上的。一个灵活网格意味着你不需要适配每个可能使用的设备尺寸，然后为其建立一个精确到像素级的适配布局。那种方式在现存有如此多种不同大小设备的前提下是不可能实现的，比如至少在台式机上，人们并不总是让他们的浏览器窗口最大化的。</p> + +<p>使用灵活网格，你只需要加进去一个断点，在内容看起来不齐整的时候改变设计。例如如果一行随着屏幕大小增加而增长得不可读的长，或者是一个盒子在变窄时把每行的两个单词挤到一起。</p> + +<p>早年间进行响应式设计的时候，我们唯一的实现布局的选项是使用<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float</a>。灵活浮动布局是这样实现的，让每个元素都有一个作为宽度的百分数，而且确保整个布局的和不会超过100%。在他对于液态网格文章的原文中，Marcotte详细描述了一种布局的法则，通过使用像素并把布局转化为百分数的方式设计。</p> + +<pre class="notranslate"><code>target / context = result </code> +</pre> + +<p>例如如果我们的预期栏尺寸为60像素，而且它所在的上下文（或者容器）为960像素，我们在将零点二的空间移动到右边以后，用960去除60，得到我们能够使用在我们的CSS上的值。</p> + +<pre class="brush: css notranslate"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>这种方式将会在今天整个Web上的许多地方上看到，而且它被我们的<a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a>一文中的布局一节中记载。可能你将会在工作中遇到使用这种方式的站点，所以有必要理解它，即使是在你不用建立一个使用浮动基础的灵活网格的情况下。</p> + +<p>下面的例子阐释了一个使用媒体查询和灵活网格的简单响应式设计。在窄屏幕上，布局将盒子堆叠在另一个的上面：</p> + +<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>在宽些的屏幕上，它们变成了两列：</p> + +<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>你可以在GitHub上找到此示例的<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">实时示例</a>和<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">源代码</a>。</p> +</div> + +<h2 id="现代布局技术">现代布局技术</h2> + +<p>现代布局方式，例如<a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多栏布局</a>、<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">伸缩盒</a>和<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格</a>默认是响应式的。它们都假设你在尽力创建一个可伸缩网格，而且给了你更容易这样做的方式。</p> + +<h3 id="多个列">多个列</h3> + +<p>这些布局方式中最老的一个是多个列，即当你指定一个<code>column-count</code>的时候，这意指你希望把你的内容分成多少列。浏览器之后会算出这些列的大小，这是一个随着屏幕尺寸变化的尺寸。</p> + +<pre class="brush: css notranslate"><code>.container { + column-count: 3; +} </code> +</pre> + +<p>如果你却去指定<code>column-width</code>的话，你是在指定一个<em>最小</em>宽度。浏览器会尽可能多数量地创建这一宽度的列，只要它们可以恰当地放进容器里面，然后将所有列之间的剩余空间共享出去。因而列的数量会随着空间的多少而改变。</p> + +<pre class="brush: css notranslate"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="伸缩盒">伸缩盒</h3> + +<p>在伸缩盒中，初始的行为是，弹性的物件将参照容器里面的空间的大小，缩小和分布物件之间的空间。通过更改<code>flex-grow</code>和 <code>flex-shrink</code>的值，你可以指示在物件遇到周围有更多或者更少的空间的情况下，你所期望的物件表现。</p> + +<p>在下面的示例中，和布局专题的<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Flexible sizing of flex items</a>中所描述的那样，使用了<code>flex: 1</code>的简写，可伸缩物件每个将会占据一份可伸缩容器中相等大小的空间。</p> + +<pre class="brush: css notranslate"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>作为一个示例，我们已经重构了上面的简单响应式布局，这次我们用了伸缩盒。你可以看看我们是怎么样才不再需要使用奇怪的百分数值来计算列的尺寸的：<a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">示例</a>、<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">源代码</a>。</p> +</div> + +<h3 id="CSS网格">CSS网格</h3> + +<p>在CSS网格布局中，<code>fr</code>单位许可了跨网格轨道可用空间的分布。下面的示例创建了一个有着3个大小为<code>1fr</code>的轨道的网格容器。这会创建三个列轨道，每个占据了容器中可用空间的一部分。你可以在<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Flexible grids with the fr unit</a>下的学习布局网格专题了解更多和这一方式相关的信息。</p> + +<pre class="brush: css notranslate"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>网格布局版本的代码要更简单，因为我们可以在.wrapper上定义列<a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">：示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">源代码</a>。</p> +</div> + +<h2 id="响应式图像">响应式图像</h2> + +<p>最简单的处理响应式图像的方式是在Marcotte的早年的关于响应式设计的文章上所描述的那样。基本来说，你可以用一张有着所需最大尺寸的图像。然后缩放它。这仍然是今日所使用的一种方式，而且在大多数样式表里面，你在某些地方可以找到下面的CSS：</p> + +<pre class="brush: css notranslate"><code>img { + max-width: 100%: +} </code> +</pre> + +<p>这种方式有显然的弊端。图像有可能会显示得比它的原始尺寸小很多，以至于浪费带宽——一个移动端用户会下载几倍于他们在浏览器窗口中实际看到的大小的图像。此外，你可能不想在移动端和桌面端有相同的图像宽高比例。例如，在移动端，方形图像的表现会很好，但是在桌面端显示同样的内容则应用宽图像。或者，认识到移动端更小尺寸的图像的你也许会希望同时展示一张不同的图像，一张在小一点的屏幕上更容易理解的图像。这些东西不能简单通过缩放图像解决。</p> + +<p>响应式图像，使用了{{htmlelement("picture")}}元素和{{htmlelement("img")}} <code>srcset</code>和<code>sizes</code> 特性，解决了这两个问题。你可以提供附带着“提示”（描述图像最适合的屏幕尺寸和分辨率的元数据）的多种尺寸，浏览器将会选择对设备最合适的图像，以确保用户下载尺寸适合他们使用的设备的图像。</p> + +<p>你也可以给用于不同尺寸的图像做“艺术指导”，为不同的屏幕尺寸提供不同的图像裁切或者完全不同的图像。</p> + +<p>你可以在MDN这里的学习HTML一节中找到详细的<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图像指南</a>。</p> + +<h2 id="响应式排版">响应式排版</h2> + +<p>在早期的工作没有考虑的一个响应式设计的元素是响应式排版的理念。本质上讲，这描述了根据屏幕真实使用范围的多少，在媒体查询的同时改变字体大小。</p> + +<p>在本例子中，我们想讲我们的一级标题设置为<code>4rem</code>，也就是说它将会有我们的基础字体的四倍大。这真的是个很大的标题！我们只想在大些的屏幕上有这么个超大的标题，那我们先弄个小点的标题，再使用媒体查询，在我们知道用户使用至少<code>1200px</code>的屏幕的时候，拿大些的尺寸覆写它。</p> + +<pre class="brush: css notranslate"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>我们已经编辑了我们在上面的响应式网格示例，让它同时包含了使用了圈出方式的响应式类型。你也可以看下随着布局变为两栏，标题是怎样转换大小的。</p> + +<p>移动端，标题变小了：</p> + +<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>但在桌面端，我们看到了大点的标题：</p> + +<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>备注：</strong> 查看这个编排好的示例：<a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">源代码</a>。</p> +</div> + +<p>正如这种排版方式展示的这样，你不需要让媒介查询只能改变页面的布局。它们也能用来调节每个元素，让它们在别的大小的屏幕上更加可用或者更具吸引力。</p> + +<h3 id="使用视口单位实现响应式排版">使用视口单位实现响应式排版</h3> + +<p>一个有趣的方式是使用视口单位<code>vw</code>来实现响应式排版。<code>1vw</code>等同于视口宽度的百分之一，即如果你用<code>vw</code>来设定字体大小的话，字体的大小将总是随视口的大小进行改变。</p> + +<pre class="brush: css notranslate">h1 { + font-size: 6vw; +}</pre> + +<p>问题在于，当做上面的事情的时候，因为文本总是随着视口的大小改变大小，用户失去了放缩任何使用<code>vw</code>单位的文本的能力。<strong>所以你永远都不要只用viewport单位设定文本。</strong></p> + +<p>这里有一个解决方法，它使用了<code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>，如果你将<code>vw</code>单位加到了使用固定大小（例如<code>em</code>或者<code>rem</code>）的值组，那么文本仍然是可放缩的。基本来说，是<code>vw</code>加在了放缩后的值上。</p> + +<pre class="brush: css notranslate">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>这就是说，我们只需要指定标题的字体大小一次，而不是为移动端设定它，然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。</p> + +<div class="blockIndicator note"> +<p>查看这种情况的一个编排好的示例： <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">示例</a>，<a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">源代码</a>。</p> +</div> + +<h2 id="视口元标签">视口元标签</h2> + +<p>如果你看看一张响应式页面的HTML源代码，你通常将会在文档的<code><head></code>看到下面的{{htmlelement("meta")}}标签。</p> + +<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的100%，在移动端以你所希望的为移动优化的大小展示文档。</p> + +<p>为何需要这个？因为移动端浏览器倾向于在它们的视口宽度上说谎。</p> + +<p>这个元标签的存在，是由于原来iPhone发布以后，人们开始在小的手机屏幕上阅览网页，而大多数站点未对移动端做优化的缘故。移动端浏览器因此会把视口宽度设为960像素，并以这个宽度渲染页面，结果展示的是桌面布局的缩放版本。其他的移动端浏览器（例如谷歌安卓上的）也是这么做的。用户可以在站点中放大、移动，查看他们感兴趣的那部分，但是这看起来很不舒服。如果你不幸遇到了一个没有响应式设计的网站，今天你还会看到这种情况。</p> + +<p>麻烦的是，你的带断点和媒介查询的响应式设计不会在移动端浏览器上像预期那样工作。如果你有个窄屏布局，在480像素及以下的视口宽度下生效，但是视口是按960像素设定的，你将不会在移动端看到你的窄屏布局。通过设定<code>width=device-width</code>，你用设备的实际宽度覆写了苹果默认的<code>width=960px</code>，然后你的媒介查询就会像预期那样生效。</p> + +<p><strong>所以你应该在你的文档头部<em>总是</em>包含上面那行HTML。</strong></p> + +<p>和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。</p> + +<ul> + <li><code>initial-scale</code>：设定了页面的初始缩放，我们设定为1。</li> + <li><code>height</code>：特别为视口设定一个高度。</li> + <li><code>minimum-scale</code>：设定最小缩放级别。</li> + <li><code>maximum-scale</code>：设定最大缩放级别。</li> + <li><code>user-scalable</code>：如果设为<code>no</code>的话阻止缩放。</li> +</ul> + +<p>你应该避免使用<code>minimum-scale</code>、<code>maximum-scale</code>，尤其是将<code>user-scalable</code>设为<code>no</code>。用户应该有权力尽可能大或小地进行缩放，阻止这种做法会引起访问性问题。</p> + +<div class="blockIndicator note"> +<p><strong>备注：</strong> 有一个CSS @规则是被设计用来替换掉视口元标签的——<a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>——但是浏览器对它的支持太差了。它是在IE和Edge中引入的，但自从Chromium内核的Edge发布以后，它就不再受到Edge浏览器支持了。</p> +</div> + +<h2 id="小结">小结</h2> + +<p>响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多CSS和HTML的功能和技术，现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站，遇到一个缩放的桌面版网站，或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为Web已经迁移到了这种响应式设计的方式上。</p> + +<p>在这些课里学到的布局方式的帮助下，实现响应式设计也变得愈加简单。如果你今天新近了解Web开发，那么你与响应式设计早期相比，手边有多得多的工具。因而，你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用，现代的CSS和HTML的使用让创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">介绍CSS布局</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方法</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基本布局掌握测验</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html b/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..8a9e4b9126 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: 支持旧浏览器 +slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">本文中，我们推荐使用弹性盒和网格作为你的设计的主要布局方式。但是，你的网站的访客会有人使用旧浏览器，或者是不支持你已经使用的方式。这总是Web上存在的情况，因为新的特性被开发出来，不同的浏览器会优先支持不同的特性。本文解释了如何使用现代的Web技术，而无需让采用旧技术的用户被拒之门外。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），了解CSS工作的原理（学习<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS">CSS介绍</a>和<a href="/zh-CN/docs/Learn/CSS/Styling_boxes">样式化盒子</a>）</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>理解怎么让你的布局为旧有的、不支持你想要使用的特性的浏览器提供支持。</td> + </tr> + </tbody> +</table> + +<h2 id="对于你的站点来说，浏览器生态是怎样的？">对于你的站点来说，浏览器生态是怎样的？</h2> + +<p>每个网站论目标用户都是不同的，在决定采用哪种方式之前，你需要查明使用旧浏览器浏览你的站点的用户的数量。如果你有一个已有的网站，你想要润色或者替换它，这是一件直截了当的事情，因为你很可能有了可用的、可以告诉你人们使用的技术的分析。如果你没有分析，或者这是一个全新的网站，那么例如<a href="http://gs.statcounter.com/">Statcounter</a>之类的站点可以提供以位置分类的数据。</p> + +<p>你应该同样考虑设备的类型和人们使用你的网站的方式。譬如，你可能更想有超出平均数量的移动设备的访问。可访问性和使用辅助性技术的人总应当被考虑，对于一些站点，这问题可能更加重要。以我的经验，开发者经常担心1%的使用旧版IE的用户的体验，而不去照顾多得多的有可访问性需求的用户。</p> + +<h2 id="对你想使用的特性的支持如何？">对你想使用的特性的支持如何？</h2> + +<p>一旦你知道了会访问你的网站的浏览器，你就可以在任何你想使用的技术，与该技术受到的支持以及为不能使用该技术的访客提供一个替代方案的难易度之间做权衡。在MDN上，我们在尽力让这个流程变得容易——在每个详述CSS属性的页面上提供浏览器的兼容性信息。例如，看一下{{cssxref("grid-template-columns")}}页面。在这个页面底部有一个表格，列出了主流的浏览器，还有它们开始支持这个属性的版本。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p> + +<p>另一个流行的查明一个特性有多受到支持的方式是<a href="https://caniuse.com/">Can I Use</a>网站。这个网站列出了主流的Web平台特性，附有它们的浏览器支持信息。你可以按位置查看使用数据——在你致力于一个用户大多数是世界上的某个区域的网站的时候会有用。你甚至可以链接你的Google Analytics账户，得到基于你的用户的信息。</p> + +<p>理解你的用户拥有的技术，以及支持你可能想要使用的东西，这样你就可以很好地作出你的所有决定，知道最多能多好地支持所有用户。</p> + +<h2 id="支持不意味着“看起来一样”">支持不意味着“看起来一样”</h2> + +<p>一个网站可能不会在所有浏览器上看起来都一样，因为你的一些用户将会是在一部手机上，而另一些用户是在桌面大屏幕上浏览你的网站；类似地，你的一些用户会是使用旧版浏览器的，而另外一些是最新版；你的一些用户可能是在聆听由屏幕阅读器朗读的你的内容，或者已经放大了页面来读到内容。支持所有人意味着提供保守设计版本的你的内容，这样在现代浏览器上，它会看起来很棒，而对于旧浏览器用户而言仍然以最低限度可用。</p> + +<p>基本级别的支持来源于良好地组织你的内容，从而让你的页面的正常布局流有意义。一个使用非常局限的功能手机的用户可能不怎么会体验到你的CSS，但是内容会以让阅读容易的方式流过。因而你应该总是从一个良好组织的HTML文档开始。<em>如果你移除掉你的样式表，你的内容还能被理解吗？</em></p> + +<p>一个选项是，把站点的这种原始视图作为回滚，用在使用很老旧或者受局限的浏览器的用户身上。如果你没有多少来到站点的人是使用这些浏览器的，将时间花在尝试给予他们和使用现代浏览器类似的体验上可能没有商业价值。将时间花在让站点具备更多可访问性的事情上，以服务远远更多的用户，可能会是更好的做法。这样的做法在纯HTML页面和花里胡哨之间是有余地的，CSS事实上让建立这些回滚变得简明。</p> + +<h2 id="在CSS中构建回滚">在CSS中构建回滚</h2> + +<p>CSS规范包含了在一个物件上同时应用两种布局的时候，解释浏览器如何反应的信息。例如，规范定义如果一个浮动元素同时又是用CSS网格布局实现的网格元素（Grid Item）的时候会发生什么。结合浏览器会忽略掉它不会理解的CSS的特点组合起来，你就得到了使用我们已经提到的<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统技术</a>构建简单布局的方法，在可以理解你的网格布局的现代浏览器中，传统布局方法会被网格布局覆写掉。</p> + +<p>在下面的示例中，我们已经浮动了三个<code><div></code>，所以它们显示在了一行中。任何使用不支持<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">CSS网格布局</a>的浏览器的人将会看到以浮动布局实现的一列盒子。一个成为了网格物件的浮动物件失去了浮动的动作，就是说通过把wrapper变成网格容器，浮动物件变成了网格物件。如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略<code>display: grid</code>相关的属性，使用浮动布局。</p> + +<div id="Example1"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p> +</div> + +<div class="note"> +<p><strong>备注：</strong>{{cssxref("clear")}}属性也在被清除的物件变为网格物件的时候失效，所以你应该在一个会变成网格布局的布局上，加上被清除的尾部。</p> +</div> + +<h3 id="回滚方式">回滚方式</h3> + +<p>有很多布局方式，它们同这个浮动示例使用的方式是类似的。你可以选择能够与你需要建立的布局范式符合得最好的那个。</p> + +<dl> + <dd>浮动和<strong><strong>清除</strong></strong></dd> + <dd>如上所示，如果浮动和清除的物件变成了弹性或网格物件，浮动和清除属性不再影响布局。</dd> + <dt>display: inline-block</dt> + <dd>这种方式能被用来建立列布局，如果一个物件被设为<code>display: inline-block</code>，但是之后变成了弹性或者网格物件，inline-block行为将会被忽略。</dd> + <dt>display: table</dt> + <dd>这种在这几节课的<a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">介绍</a>中描述的建立CSS表格的方式可以被用作回滚。被设为CSS表格布局的物件将会在它们变为弹性或者网格物件的时候不再表现出这种行为。重要的是，被建立起来用于修复表格结构的匿名盒子没有被建立起来。</dd> + <dt>Multiple-column Layout</dt> + <dd>对于某些布局，你能用<a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a>作为回滚。如果你的容器有任何一个<code>column-*</code>属性被定义，之后变成了网格容器，那么多列行为不会实现。</dd> + <dt>作为网格的回滚的弹性盒</dt> + <dd><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a>由于受到了IE10和IE11的支持，比网格有着更好的浏览器支持。不过，在这节课的稍后部分，你一定要看下旧浏览器对弹性盒相当参差不齐而且令人困惑的支持的相关信息。如果你把弹性容器做成了网格容器，任何应用到子元素的<code>flex</code>属性都会被忽略。</dd> +</dl> + +<p>对于许多在旧浏览器中微调的布局来说，你可能会发现你能用这种方式使用CSS，给访客亲切的体验。我们加入了一个更简单的基于旧的和受到良好支持技术的布局，然后用新一些的CSS建立一个可以由90%的用户看到的布局。但是存在这样的情况：回滚代码会需要包含新浏览器也能理解的东西；举例来说就是，我们要往我们的浮动物件中加入百分数宽度，从而让列看起来更像网格，拉伸以充满容器。</p> + +<p>在浮动布局中，百分数是依照容器计算的——33.333%是容器宽度的三分之一。但在网格中，这33.333%是根据物件所在的网格区域计算的，所以只要网格布局引入进来，物件的大小实际上变成了我们想要的大小的三分之一。</p> + +<div id="Example2"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p> +</div> + +<p>为了处理这种问题，我们需要有能够探测网格是否受到支持的方法，也就是探测它是否会覆写宽度的方法。CSS在这里为我们提供了一个解决方法。</p> + +<h2 id="特性查询">特性查询</h2> + +<p>特性查询允许你测试一个浏览器是否支持任何特定的一个CSS特性。这就是说，你可以写一些面向不支持某项特性的浏览器的CSS，然后检查以了解浏览器是否支持，如果支持的话就可以加进你的复杂布局了。</p> + +<p>如果我们向上面的示例中加入了一条特征查询，要是我们知道网格受到支持的话，我们可以用它把我们的物件宽度设定回<code>auto</code>。</p> + +<div id="Example3"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} + +@supports (display: grid) { + .item { + width: auto; + } +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p> +</div> + +<p>对特性查询的支持，在各现代浏览器中都是很好的。但是你应该注意那些既不支持CSS网格，也不支持特征查询的浏览器。这就是说在上面详细介绍的一种方式，对这些浏览器而言，会表现得很好。我们要做的是，先在任何特性查询以外，编写我们的旧CSS。不支持网格也不支持特性查询的浏览器会使用这部分它们可以理解的布局信息，将其他东西全都忽略掉。支持特性查询和CSS网格等的浏览器会运行网格代码和特性查询之内的代码。</p> + +<p>对于特性查询的规范，也包含了测试浏览器是否支持某个特性的能力——这只在浏览器支持特性查询的时候有用。未来，一种检测支持的缺失的方式将会实现，同时不支持特性查询的浏览器也将退出历史舞台。但是现在，你要使用这种编写旧CSS的方式，然后覆写它，以求最广泛的支持。</p> + +<h2 id="弹性盒的旧版本">弹性盒的旧版本</h2> + +<p>在旧版浏览器中，你可以找到弹性盒规范的旧有修订版本。在编写这篇文章的时候，这大多数是IE10的问题，它在弹性盒上使用了<code>-ms-</code>前缀。这也意味着现在还存在着一些过时的文章和教程，<a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">这篇有用的指导</a>帮助你分辨你看到的信息；如果你需要在很旧的浏览器中需要flex支持的话，它也会帮到你。</p> + +<h2 id="IE10和IE11的带前缀版的网格">IE10和IE11的带前缀版的网格</h2> + +<p>CSS网格规范最初成形于IE10，也就是说尽管IE10和IE11不支持<em>现代的</em>网格，虽然这种网格和本站记载的现代布局不同，它们还是有一个很堪用的网格布局版本。IE10和IE11的实现是以<code>-ms-</code>为前缀的，也就是说你可以给这两个浏览器用，而在非微软浏览器上，这种属性会被忽略。不过Edge仍然能理解旧语法，所以小心点，让每个东西都安全地在你的现代网格CSS中覆写。</p> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">网格布局渐进增强</a>指导能帮你理解IE版的网格，我们在这节课的末尾加入了一些额外的有用的链接。不过，除非你有很多使用旧版IE的访客，你可能发现专注于建立一个由所有不支持的浏览器共用的回滚版本是一个更好的选择。</p> + +<h2 id="测试旧浏览器">测试旧浏览器</h2> + +<p>由于大多数浏览器都支持弹性盒和网格，测试旧浏览器想想就很难。一种方式是使用在线的测试工具，例如Sauce Labs，在<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a>模块里有详细说明。</p> + +<p>你也可以下载安装虚拟机，在你的电脑的容器环境中运行旧版浏览器。能够使用旧版IE是很有用的，为此，微软已经制作了<a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">一些可以免费下载的虚拟机</a>。这些对Mac、Windows和Linux操作系统都是可以用的，所以即使你没有Windows电脑，这也是一个测试旧的和现代Windows浏览器的绝佳办法。</p> + +<h2 id="小结">小结</h2> + +<p>你现在有了自信地使用例如网格和弹性盒技术、建立面向旧浏览器的回滚以及利用任何可能会在未来出现的 新技术所需的知识。</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">在CSS中使用媒体查询</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">弹性盒的后向兼容性</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS网格布局和渐进优化</a></li> + <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">使用CSS网格：支持没有网格的浏览器</a></li> + <li><a href="https://24ways.org/2012/css3-grid-layout/">使用IE10和IE11版网格的教程</a></li> + <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">我应该尽力使用IE10的网格布局实现吗？</a></li> + <li><a href="https://24ways.org/2017/cascading-web-design/">有特性查询的层叠式Web设计</a></li> + <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">使用特性查询（视频）</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">CSS布局介绍</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局方式</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li> + <li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基本布局掌握测验</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html b/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html new file mode 100644 index 0000000000..58313b6fdd --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/传统的布局方法/index.html @@ -0,0 +1,577 @@ +--- +title: 传统的布局方法 +slug: Learn/CSS/CSS_layout/传统的布局方法 +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">在CSS布局中，网格系统是一种非常常见的布局方式，并且在CSS 网格布局之前，它们倾向于由浮动和其他的布局功能实现。假想你的布局是一组数字标注的列（例如4、6或者12），然后把你的内容填充到这些想象的列中。这篇文章将要探讨这种早期的方法是怎么实现的，来帮助你在旧项目工作时更好地理解他们。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习前提：</th> + <td>HTML 基础(学习 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>),并且了解CSS是怎么工作的(学习 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> and <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a>.)</td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>了解浏览器CSS网格布局系统的基本概念。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS网格布局之前的布局与网格系统">CSS网格布局之前的布局与网格系统</h2> + +<p>一个来自设计领域的人或许会惊讶，CSS直到最近才有网格系统，不仅如此，我们还用了许多次优方法来建立类网格设计。我们现在把这些称为“古老”的方法。</p> + +<p>对于新项目来说，大多数情况下CSS网格布局（CSS Grid Layout）被用来和其他一个或多个现代的布局方法结合，以形成布局的基础。但是你会时不时的遇到采用这种古老方法的“网格系统”。值得了解它们是如何工作的，以及为什么它们和CSS网格布局不同。</p> + +<p>这个课程将会解释基于float和flexbox的网格系统和网格框架是如何工作的。学习过网格布局之后，你可能会惊讶，这些看起来真的好复杂！如果你需要为不支持新技术的老浏览器上创建后备代码的话，这些知识将会变的十分有用，而且你也可以在使用这些类别系统的已有工程上工作。</p> + +<p>值得铭记在心的是，在我们探索这些系统时，它们里面没有哪个的建立方式是像通过CSS网格布局创建网格那样，真的建立一个网格。他们通过给目标一个大小， 然后推动它们，让它们<strong>看起来</strong>像网格一样排列成一条线。</p> + +<h2 id="两列布局">两列布局</h2> + +<p>让我们从最简单的实例开始——一个两列布局。你可以按照步骤在你的电脑上创建一个新的 <code>index.html</code>，先用一个<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">简单HTML模板</a>填充它，然后在适当的位置填充下面的代码。在这节底部，你可以看到一个展示最终代码样貌的实时实例。</p> + +<p>首先，我们需要在我们的栏中放入一些内容。把现在在body中的内容替换成下面的代码：</p> + +<pre class="brush: html"><h1>2 column layout example</h1> +<div> + <h2>First column</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> + +<p>每一列都需要一个上一级元素来包含内容，这样我们可以一次性操作所有内容。在这个例子中我们选择了{{htmlelement("div")}}， 但是你可以选择其他更合适的，例如{{htmlelement("article")}}, {{htmlelement("section")}}, 和 {{htmlelement("aside")}}，或者是任何别的元素。</p> + +<p>现在我们来看CSS。首先，应用以下的代码来对HTML进行基本设置：</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +}</pre> + +<p>body将会占据90%的视口宽度，直到达到900像素，在这种情况下，它将固定并保持在视口正中。 默认情况下，它的子项（the {{htmlelement("h1")}} 和两个 {{htmlelement("div")}}）将会达到正文宽度的100%。如果我们希望两个{{htmlelement("div")}}，一个浮在窗口的一边，另一个浮动在另一边的话， 我们需要将它们的宽度设置为其父元素的100%或者更小，以便他们可以并排放置。将下面的代码加在CSS的底部：</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; +} + +div:nth-of-type(2) { + width: 48%; +}</pre> + +<p>这里我们将它们都设置为了父元素宽度的48%——总共是96%，在两栏之间留4%的空隙，为它们提供一些宽松的空间。现在我们只需要将让列浮动，像这样：</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +}</pre> + +<p>将这些都放在一起，会得到这样的结果：</p> + +<div id="Floated_Two_Col"> +<div class="hidden"> +<h6 id="简单两列布局">简单两列布局</h6> + +<pre class="brush: html"><h1>2 column layout example</h1> + +<div> + <h2>First column</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>Second column</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p> + +<p>你有没有注意到我们在宽度的表示上都用的是百分比——这是一个很好的策略，这创建了一个<strong>流动布局（liquid layout），</strong>能够适应不同的屏幕大小，在小一些的屏幕上也能使列保持一样的比例。试一试自己来调整浏览器窗口的宽度，这是响应式网页非常有价值的一个工具。</p> + +<div class="note"> +<p><strong>备注：</strong>你可以在 <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> 实时查看这个实例（另见<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">源代码</a>）。</p> +</div> + +<h2 id="创建简单的传统网格框架">创建简单的传统网格框架</h2> + +<p>大多数传统的框架使用{{cssxref("float")}}属性来使列相邻排列，让它们看起来像是一个网格。以用float创建网格的流程工作，可以向你展示它们工作的原理，并介绍一些更高级的概念，并在<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动和清除</a>这节课中学到的内容之上搭建更多的东西。</p> + +<p>最简单的一类网格创建是固定宽度的——我们只需要计算设计中总的宽度、列的数目、每一列和间隔的宽度。但是，如果我们决定设计的网格是可以根据浏览器宽度缩放的，我们则需要计算每一列和间距的所占的宽度的百分比。</p> + +<p>下一部分我们将学习如何创建这两种方式的网格。我们会构建一个有12列的表格——我们选择了12这个常见的数字，来看它对不同情景的适应情况，因为12可以被6，4，3，和2完全整除。</p> + +<h3 id="一个简单的固定宽度网格">一个简单的固定宽度网格</h3> + +<p>让我们先来创建一个固定列宽度的网格系统吧。</p> + +<p>首先，把 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a>下载储存下来，其body中包含以下的标记：</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div></pre> + +<p>我们的目标是把它变成一个有两行十二列的演示网格——第一行显示各列的大小，第二行显示网格上不同大小的区域。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> + +<p>在{{htmlelement("style")}}中，加入下面的代码，使容器右侧的内边距为20像素，总的宽度变为980像素。这样给我们留出960像素可以放置列和它们的间隔——这种情况下，内边距会被从总的内容宽度中减去，因为我们在{{cssxref("box-sizing")}}中将站点上所有的元素设置成了<code>border-box</code> （可以查看<a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">完全改变盒模型</a>，获得更多解释）。</p> + +<pre class="brush: css">* { + box-sizing: border-box; +} + +body { + width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 20px; +}</pre> + +<p>现在使用包装了网格每行的列容器，清除网格中每行的浮动，在你前面的规则里加入下面的规则：</p> + +<pre class="brush: css">.row { + clear: both; +}</pre> + +<p>应用这条清除规则，意味着我们不用在每行上都填充12列元素。行与行之间不会互相干扰，并保持分隔。</p> + +<p>列与列之间保持20像素的间隔。我们使用每列元素的左外边框来实现这个间隔。然后我们一共有12个间隔 — 12 x 20 = 240。</p> + +<p>我们需要从960px的总宽减去这个间隔，然后剩下720像素给我们的列。如果用720除以12，我们知道每列有60个像素宽。</p> + +<p>接下来我们给<code>.col</code>类写一个规则, 让它向左浮动，给它设置20像素的{{cssxref("margin-left")}}来实现一个间隔，再设置60像素的{{cssxref("width")}}。把下面的规则加到你的CSS底部：</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 20px; + width: 60px; + background: rgb(255, 150, 150); +}</pre> + +<p>单个列的最上面一行现在铺开成为了一个排列整齐的网格。</p> + +<div class="note"> +<p><strong>备注：</strong>我们也已经让每列变成亮红色，这样你就能准确看到每列占据了多少空间。</p> +</div> + +<p>如果我们想让布局容器横跨多列，必须要给它设置特殊的类，来适应列的数量的{{cssxref("width")}} 值（加上间隔的值）。我们需要新建额外的类来允许横跨2-12列。每个宽度是将该列数的列宽加上间隔宽度相加的结果，这些宽度总是比列数少一个。</p> + +<p>在你的CSS底部加入下面的内容：</p> + +<pre class="brush: css">/* Two column widths (120px) plus one gutter width (20px) */ +.col.span2 { width: 140px; } +/* Three column widths (180px) plus two gutter widths (40px) */ +.col.span3 { width: 220px; } +/* And so on... */ +.col.span4 { width: 300px; } +.col.span5 { width: 380px; } +.col.span6 { width: 460px; } +.col.span7 { width: 540px; } +.col.span8 { width: 620px; } +.col.span9 { width: 700px; } +.col.span10 { width: 780px; } +.col.span11 { width: 860px; } +.col.span12 { width: 940px; }</pre> + +<p>创建了这些类以后，我们可以在网格上布局不同宽度的列。试试保存并在你的浏览器上加载这个页面，来查看效果。</p> + +<div class="note"> +<p><strong>备注：</strong> 如果你在让上面的示例实现的时候正遇到麻烦，尝试将它和我们在GitHub上的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">完成版</a>进行比较（再<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">看下实时的示例</a>）。</p> +</div> + +<p>试试修改这些类，甚至添加、删除一些容器，来看看你能怎么改变这个布局。例如，你可以把第二行写成这样：</p> + +<pre class="brush: css"><div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div></pre> + +<p>现在你的网格布局生效了。你可以简单的定义这些行，和每行的列数，然后给他们添加你想要的内容。真棒！</p> + +<h3 id="创建液态网格">创建液态网格</h3> + +<p>这个网格表现的不错，但是它长度固定。 我们实际却想要一个弹性（流体）的网格，它可以随着浏览器的{{Glossary("viewport")}}大小的变化自动伸缩。为了达成这个目标，我们需要把相应的像素的长度变为百分比长度。</p> + +<p>把固定宽度转为伸缩的基于百分比宽度的算式在下面：</p> + +<pre>target / context = result</pre> + +<p>在我们的列宽里，我们的<strong>目标列长度</strong>是60像素，我们的<strong>上下文</strong>是960像素的包装。我们可以这么计算百分比：</p> + +<pre>60 / 960 = 0.0625</pre> + +<p>然后我们挪动小数点两位，得到百分数6.25%。所以在CSS里面，我们可以用6.25%代替60像素。</p> + +<p>我们需要同样这么算间隔：</p> + +<pre>20 / 960 = 0.02083333333</pre> + +<p>所以我们需要用2.08333333%代替<code>.col</code>里{{cssxref("margin-left")}}的20像素，和<code>.wrapper</code>里{{cssxref("padding-right")}}的20像素。</p> + +<h4 id="更新我们的网格">更新我们的网格</h4> + +<p>创建一个之前例子网页的副本。然后开始这个章节，或者制作一个<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>代码的本地副本，以将其作为入手点。</p> + +<p>更新第二个CSS规则（有着<code>.wrapper</code>选择器），像下面这样：</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +}</pre> + +<p>我们不仅给它一个百分比的{{cssxref("width")}}，还添加了{{cssxref("max-width")}}属性，来确保布局不过于宽。</p> + +<p>下一步，更新第四条CSS规则（有<code>.col</code>选择器），像这样：</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 2.08333333%; + width: 6.25%; + background: rgb(255, 150, 150); +}</pre> + +<p>现在做些稍微麻烦的事 — 我们需要更新所有 <code>.col.span</code> 规则来把像素变为百分比。这需要点时间计算；为节省你的功夫，我们在下面替你做了。</p> + +<p>像下面这样更新CSS规则的底部块：</p> + +<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +.col.span2 { width: 14.58333333%; } +/* Three column widths (18.75%) plus two gutter widths (4.1666666) */ +.col.span3 { width: 22.91666666%; } +/* And so on... */ +.col.span4 { width: 31.24999999%; } +.col.span5 { width: 39.58333332%; } +.col.span6 { width: 47.91666665%; } +.col.span7 { width: 56.24999998%; } +.col.span8 { width: 64.58333331%; } +.col.span9 { width: 72.91666664%; } +.col.span10 { width: 81.24999997%; } +.col.span11 { width: 89.5833333%; } +.col.span12 { width: 97.91666663%; }</pre> + +<p>现在保存你的代码，从浏览器里加载它，尝试改变视口长度——你应该可以看到网格完美地适配了。</p> + +<div class="note"> +<p><strong>备注：</strong>如果你在让上面的示例实现的时候正遇到困难，试着把它和我们<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">GitHub上的完成版</a>比较（另<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">见实时的示例</a>）。</p> +</div> + +<h3 id="使用calc函数的更简单计算">使用calc()函数的更简单计算</h3> + +<p>你可以用 {{cssxref("calc()")}} 函数来在CSS里面做数学方面的计算——这允许你在CSS里插入简单的算式，来计算那些值。这个会很有用，特别当你有个复杂计算的时候，甚至你还可以在算式里用不同的单位，比如“我想要这个元素一直比它父元素少50像素”。看下<a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">这个来自MediaRecorder API教程的示例</a>。</p> + +<p>言归正传, 来讲我们的网格！我们网格里跨越超过一列的列，它的总长是6.45%乘跨越的列数加 2.08333333%，乘间隔数（间隔数总等于行数减一）。<code>calc()</code> 函数允许我们就在宽度值里面这么计算，所以对跨越4列的列我们可以这么算：</p> + +<pre class="brush: css">.col.span4 { + width: calc((6.25%*4) + (2.08333333%*3)); +}</pre> + +<p>试着用下面的内容替换你底部的规则块，然后在浏览器中重载，看看你是否能得到相同的结果：</p> + +<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } +.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } +.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } +.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } +.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); } +.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } +.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } +.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> + +<div class="note"> +<p><strong>备注：</strong>你能在<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a>里看到我们的完成版（另<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">见实时版</a>）。</p> +</div> + +<div class="note"> +<p><strong>备注：</strong>如果你不能让这个正常工作，可能是你的浏览器不支持<code>calc()</code>函数，尽管各浏览器对它的支持相当好——远至IE9那样老。</p> +</div> + +<h3 id="语义vs.“无语义”网格系统">语义vs.“无语义”网格系统</h3> + +<p>在标记中添加类以定义布局，意味着您的内容和标记与您的可视化表示相关联。你将会偶尔听到，这种使用CSS类的方式，被描绘成“无语义”：描述了内容的外观，而不是描述内容的语义性的类的使用。这是我们的<code>span2</code>、<code>span3</code>等类所面临的情况。</p> + +<p>这些并不是唯一的方法，你或许会转头决定使用网格，然后向已有的语义类里面加入尺寸信息。例如，如果你有一个带有<code>content</code>类的{{htmlelement("div")}}，而且你想让它横跨8列，你可以从<code>span8</code>类里面复制整个关于宽度的规则，结果是像这样的一条规则：</p> + +<pre class="brush: css">.content { + width: calc((6.25%*8) + (2.08333333%*7)); +}</pre> + +<div class="note"> +<p><strong>备注：</strong> 如果你要用预处理工具，如<a href="http://sass-lang.com/">Sass</a>，你可以建立一个简单的类（mixin）以插入那个值。</p> +</div> + +<h3 id="在我们的网格里启用偏移容器">在我们的网格里启用偏移容器</h3> + +<p>我们创造的网格很有效。只要我们想把所有容器都从网格的左手边对齐。如果我们想在第一个容器前来个空列，或者容器之间来个空列，我们需要新建一个偏移类，为站点加上左外边距，来可见地推动网格。再来点数学计算！</p> + +<p>让我们实际试试吧。</p> + +<p>从你以前的代码开始，或者把我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a>文件用作起始点。</p> + +<p>我们在CSS上搞一个类，它会给一个容器元素来个一列宽度的偏移。将下面的内容加到你的CSS的底部：</p> + +<pre class="brush: css">.offset-by-one { + margin-left: calc(6.25% + (2.08333333%*2)); +}</pre> + +<p>或者假如你更愿意自己算百分比，用下面这个：</p> + +<pre class="brush: css">.offset-by-one { + margin-left: 10.41666666%; +}</pre> + +<p>想要给一个容器的左边加个有一列宽的空白的话，你可以在容器上添加这个类。例如，如果你在HTML中有这个内容的时候：</p> + +<pre class="brush: html"><div class="col span6">14</div></pre> + +<p>试着用下面的替换：</p> + +<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> + +<div class="note"> +<p><strong>备注：</strong> 注意你需要别让横跨多列的列太多，给偏移留点空间！</p> +</div> + +<p>试着载入，刷新来查看区别，或者查看我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a>示例（另见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">实时</a>示例）。完成的示例应该看起来像这样：</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> + +<div class="note"> +<p><strong>备注：</strong>作为额外练习，你能实现一个<code>offset-by-two</code>类吗？</p> +</div> + +<h3 id="浮动网格的限制">浮动网格的限制</h3> + +<p>当你想用这个网格系统时，你得仔细看看你的总长是否正确，并且每行中的元素所横跨的列数不超过这一行可容纳的列数。由于浮动布局实现的方式，如果网格列的数目对与网格来说太大，在最后边的元素会跑到下一行去，搞坏了布局 。</p> + +<p>还要记住，如果元素内容比行宽，它会溢出，看起来一团糟。</p> + +<p>这个系统的最大限制是，它本质上是一维的。我们在处理列、让元素跨越列，但是处理不了行。如果不设置一个确定的高度，用老方法很难控制元素高。这个方法很不灵活 —它只有在你确定你的内容有个明确的高的情况下有用。</p> + +<h2 id="弹性盒网格？">弹性盒网格？</h2> + +<p>如果你读了之前关于<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>的文章，你大概会想，弹性布局是个写网格布局的好办法。现在有很多基于弹性布局的网格布局，并且弹性布局可以解决很多上面讲的问题。</p> + +<p>但是，弹性布局不是为网格布局而设的，把它当网格布局来用也有新的挑战。举个简单的例子，我们可以使用我们在上面使用过的同样的示例标记，用下面的CSS样式化<code>wrapper</code>、<code>row</code>和<code>col</code>类：</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +} + + +.row { + display: flex; +} + +.col { + margin-left: 2.08333333%; + margin-bottom: 1em; + width: 6.25%; + flex: 1 1 auto; + background: rgb(255,150,150); +}</pre> + +<p>你可以试着在你自己的示例里做这些替换，或者看下我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a>示例代码（另见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">实时版</a>）。</p> + +<p>这里，我们会把每行变成一个弹性容器。有了弹性盒为基础的网格，我们仍然需要行，以让我们的元素加起来能不超过100%。我们将容器设为<code>display: flex</code>。</p> + +<p>在<code>.col</code>上。我们设定{{cssxref("flex")}}属性的第一个值（{{cssxref("flex-grow")}}）为1，这样我们的物件可以变大；第二个值（{{cssxref("flex-shrink")}}）为1，这样我们的物件可以缩小；第三个值（{{cssxref("flex-basis")}}）为<code>auto</code>。因为我们的元素的{{cssxref("width")}}被设定了， <code>auto</code>将会使用和<code>flex-basis</code> 值一样的宽度。</p> + +<p>在顶行，我们有十二个整齐的盒子，它们在视口宽度改变时同等地放大缩小。可是在下一行，我们只有四个物件，它们也从六十像素的基础上变大变小。因为它们只有四个，它们可以长得比上一行的物件更快，结果是它们都占据了第二行的相同宽度。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> + +<p>为了解决这个问题，我们仍然需要包含<code>span</code>类，以提供一个用于那个元素的，可以替换掉为 <code>flex-basis</code>所使用的值的宽度。</p> + +<p>它们也不遵从上面的物件使用的网格，因为它们对它一无所知。</p> + +<p>弹性盒设计上是<strong>一维</strong>。它处理单个维度，行的或者列的。我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。</p> + +<p>在你的工程中，由于弹性盒相比浮动能提供附加的对齐和空间分布能力，你可能仍然选择使用弹性盒“网格”。但是你应该清楚，你仍然是在使用一个被设计用来做其他事情的工具。所以你可能觉得，这就像是在你抵达你想要的结果之前，让你跳过额外的坑。</p> + +<h2 id="第三方网格系统">第三方网格系统</h2> + +<p>既然我们理解了我们的网格计算背后的数学了，我们现在该看看一些常用的第三方网格系统了。如果你在互联网上搜索“CSS网格框架”的话，你会发现一个包含了可选项的庞大列表。流行的框架，例如<a href="http://getbootstrap.com/">Bootstrap</a>和<a href="http://foundation.zurb.com/">Foundation</a>，就包含了网格系统。此外还有独立的网格系统，不是用CSS开发的就是用预处理器开发的。</p> + +<p>让我们看下这些独立系统其中的一个，它阐释了利用网格框架工作的常见技术。我们将要使用的网格是Skeleton的一部分，它是一种简单的CSS框架。</p> + +<p>访问<a href="http://getskeleton.com/">Skeleton网站</a>以开始，选择“Download”下载ZIP文件。解压文件，把skeleton.css和normalize.css复制到一个新路径下。</p> + +<p>制作一个<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a>文件的副本，在同skeleton和normalize CSS相同的路径下保存副本。</p> + +<p>在HTML页面包含skeleton和normalize CSS，通过把以下内容加到文件头部的方式：</p> + +<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"></pre> + +<p>Skeleton不仅包含了网格系统，它还包含了用于排版和其他能作为起始点的页面元素上的CSS。我们现在把这些部分留作默认值，我们在这里真正感兴趣的是网格。</p> + +<div class="note"> +<p><strong>备注：</strong><a href="/en-US/docs/">Normalize</a>是由Nicolas Gallagher编写的一个很有用的小CSS库，它自动做了一些有用的基础布局修正，让元素默认的样式化在不同浏览器中更加协调。</p> +</div> + +<p>我们将会使用和在前面的示例中相似的HTML。将下面的内容加到你的HTML body中：</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> +</div></pre> + +<p><br> + 要开始使用Skeleton，我们需要给包装的{{htmlelement("div")}}一个<code>container</code>类——这已经包含在了我们的HTML里面。这让最大宽度为960像素的内容居中了。你可以看看盒子现在是怎么不会宽于960像素的。</p> + +<p>你可以看看skeleton.css文件里，CSS在我们应用这个类的时候是如何使用的。<code><div></code>用值为<code>auto</code>的左右外边距居中，左边和右边还应用了20像素的内边距。同我们前面做过的那样，Skeleton同时把Skeleton{{cssxref("box-sizing")}}属性设为<code>border-box</code>值，所以这个元素的内边距和边框将会被包含在整个width里面。</p> + +<pre class="brush: css">.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +}</pre> + +<p>如果它们在行里面的话，元素只会是网格的一部分，所以对于前面的示例，我们需要一个额外的<code><div></code>或者其他带有<code>row</code>类的、内嵌到<code>content</code> <code><div></code>和我们实际的内容容器的<code><div></code>之间的元素。我们也已经做了这件事。</p> + +<p>现在让我们铺开容器盒子。Skeleton基于一个12列的网格。顶端一行的盒子都需要加上<code>one column</code>的类，以让它们横跨一列。</p> + +<p>现在加上这些，像是在下面的节录里面显示的那样：</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> + /* and so on */ + </div> +</div></pre> + +<p>然后，给第二行的容器加上解释它们应该横跨几个列的类，像这样：</p> + +<pre class="brush: html"><div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div></pre> + +<p>试着保存你的HTML，在你的浏览器里面载入，看下效果。</p> + +<div class="note"> +<p><strong>备注：</strong>如果你在实现这个示例的时候遇到麻烦，试着拿它和我们的<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a>文件进行比较（另见<a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">实时运行版</a>）。</p> +</div> + +<p>如果你看下skeleton.css文件的内容，你能理解这是如何实现的。例如，Skeleton有下面的定义内容，用于样式化加入了“three colomns”类的元素。</p> + +<pre class="brush: css">.three.columns { width: 22%; }</pre> + +<p>Skeleton（或者其他任何网格框架）正在做的所有事情是，设定一个预定义的类，你可以通过把它们加到你的标记文件里面的方式使用这些框架，和你自己做计算这些百分数的工作完全是一样的。</p> + +<p>正如你所看到的这样，我们使用Skeleton的时候，几乎不需要写多少CSS。它在我们向标记文本里面加类的时候，替我们处理了所有的浮动。正是把布局的责任甩给其他人的可能性，使得使用用于网格系统的框架成为了一个强制性的选择！但是现在来看，有了CSS网格布局，许多开发者正在停止使用这些框架，转而使用CSS提供的内建的原生网格。</p> + +<h2 id="小结">小结</h2> + +<p>你现在理解了多种网格系统是如何建立的。这将会在处理老网站的时候，以及理解CSS网格布局的原生网格和那些老系统的不同的时候帮到你。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="模块目录">模块目录</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">CSS布局介绍</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">正常布局流</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">网格</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统布局模式</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">基础布局掌握测验</a></li> +</ul> diff --git a/files/zh-cn/learn/css/css_layout/定位/index.html b/files/zh-cn/learn/css/css_layout/定位/index.html new file mode 100644 index 0000000000..cbfa094300 --- /dev/null +++ b/files/zh-cn/learn/css/css_layout/定位/index.html @@ -0,0 +1,615 @@ +--- +title: 定位 +slug: Learn/CSS/CSS_layout/定位 +tags: + - CSS + - 初学者 + - 定位 + - 布局 + - 指南 + - 相对定位 + - 绝对定位 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> +</div> + +<p class="summary">定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 本文解释的是定位({{cssxref("position")}})的各种不同值，以及如何使用它们。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>HTML 基础 (学习 <a href="/zh-CN/docs/learn/HTML/Introduction_to_HTML">HTML导学</a>)和CSS怎样工作的 (学习<a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS"> CSS导学</a>)</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>了解CSS定位的工作原理</td> + </tr> + </tbody> +</table> + +<h2 id="文档流">文档流</h2> + +<p>定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。</p> + +<p>首先，围绕元素内容添加任何内边距、边界和外边距来布置单个元素盒子——这就是 <a href="/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model">盒模型</a> ，我们前面看过。 默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 <code>display: block;</code>。</p> + +<p>这只是解释了单个元素，但是元素相互之间如何交互呢？ <strong>正常的布局流</strong>（在布局介绍文章中提到）是将元素放置在浏览器视口内的系统。默认情况下，块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。</p> + +<p>内联元素表现不一样——它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。</p> + +<p>如果两个相邻元素都在其上设置外边距，并且两个外边距接触，则两个外边距中的较大者保留，较小的一个消失——这叫<a href="/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">外边距折叠</a>, 我们之前也遇到过。</p> + +<p>让我们来看一个简单的例子来解析这一切：</p> + +<pre class="brush: html notranslate"><h1>Basic document flow</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +}</pre> + +<p>{{ EmbedLiveSample('文档流', '100%', 500) }}</p> + +<p>在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。</p> + +<p>如果可能，我们希望您在本地计算机上跟随练习 — 从GitHub仓库下载一个<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">源代码</a>) 然后用它作为我们的起步点。</p> + +<h2 id="介绍定位">介绍定位</h2> + +<p>定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。</p> + +<p>有许多不同类型的定位，您可以对HTML元素生效。要使某个元素上的特定类型的定位，我们使用{{cssxref("position")}}属性。</p> + +<h3 id="静态定位">静态定位</h3> + +<p>静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。</p> + +<p>为了演示这一点，并为以后的部分设置示例，首先在HTML中添加一个<code>positioned</code> 的 <code>class</code> 到第二个{{htmlelement("p")}}：</p> + +<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> + +<p>现在，将以下规则添加到CSS的底部：</p> + +<pre class="brush: css notranslate">.positioned { + position: static; + background: yellow; +}</pre> + +<p>如果现在保存和刷新，除了第2段的更新的背景颜色，根本没有差别。这很好——正如我们之前所说，静态定位是默认行为！</p> + +<div class="note"> +<p><strong>注意：</strong>你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> 查看这个例子 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">see source code</a>)。</p> +</div> + +<h3 id="相对定位">相对定位</h3> + +<p>相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 让我们继续并更新代码中的 <code>position</code> 属性：</p> + +<pre class="brush: css notranslate">position: relative;</pre> + +<p>如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。</p> + +<h3 id="介绍_top_bottom_left_right">介绍 top, bottom, left, right</h3> + +<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 <code>.positioned</code> 规则中添加以下声明：</p> + +<pre class="notranslate">top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>注意：</strong>这些属性的值可以采用逻辑上期望的任何单位 ——px，mm，rems，％等。</p> +</div> + +<p>如果你现在保存和刷新，你会得到一个这样的结果：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}</p> + +<p>酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 <code>top: 30px;</code>一个力推动框的顶部，使它向下移动30px。</p> + +<div class="note"> +<p><strong>注意：</strong> 你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> 查看这个例子 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">see source code</a>)。</p> +</div> + +<h3 id="绝对定位">绝对定位</h3> + +<p>绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：</p> + +<pre class="notranslate">position: absolute;</pre> + +<p>如果你现在保存和刷新，你应该看到这样：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('绝对定位', '100%', 420) }}</p> + +<p>首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……</p> + +<p>第二，注意元素的位置已经改变——这是因为{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 所以在这种情况下，我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。</p> + +<div class="note"> +<p><strong>注意：</strong>如果需要，您可以使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}} 调整元素大小。 尝试设置 <code>top: 0; bottom: 0; left: 0; right: 0;</code> 和 <code>margin: 0;</code> 对你定位的元素，看看会发生什么！ 之后再回来</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>是的，margins 仍会影响定位的元素。 然而margin collapsing不会。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>你可以在<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> 查看这个例子(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">see source code</a>)。</p> +</div> + +<h3 id="定位上下文">定位上下文</h3> + +<p>哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">Identifying the containing block</a>).</p> + +<p>如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在<strong>初始块容器</strong>中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。</p> + +<p>绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变<strong>定位上下文</strong> —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。 为了演示这一点，将以下声明添加到您的body规则中：</p> + +<pre class="notranslate">position: relative;</pre> + +<p>应该得到以下结果：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Positioning context</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('定位上下文', '100%', 420) }}</p> + +<p>定位的元素现在相对于{{htmlelement("body")}}元素。</p> + +<div class="note"> +<p>注意：你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">see source code</a>).</p> +</div> + +<h3 id="介绍_z-index">介绍 z-index</h3> + +<p>所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？</p> + +<p>尝试添加以下到您的CSS，使第一段也是绝对定位：</p> + +<pre class="notranslate">p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>此时，您将看到第一段的颜色为绿色，移出文档流程，并位于原始位置上方一点。它也堆叠在原始的 <code>.positioned</code> 段落下，其中两个重叠。这是因为 <code>.positioned</code> 段落是源顺序(HTML标记)中的第二个段落，并且源顺序中后定位的元素将赢得先定位的元素。</p> + +<p>您可以更改堆叠顺序吗？是的，您可以使用{{cssxref("z-index")}}属性。 “z-index”是对z轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x轴）和垂直（y轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。 （0,0）位于页面（或元素）的左上角，x和y轴跨页面向右和向下（适合从左到右的语言，无论如何）。</p> + +<p>网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。{{cssxref("z-index")}} 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。</p> + +<p>要更改堆叠顺序，请尝试将以下声明添加到 <code>p:nth-of-type(1)</code> 规则中：</p> + +<pre class="notranslate">z-index: 1;</pre> + +<p>你现在应该可以看到完成的例子：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>z-index</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}</p> + +<p>请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。</p> + +<div class="note"> +<p><strong>注意：</strong>你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">see source code</a>).</p> +</div> + +<h3 id="固定定位">固定定位</h3> + +<p>还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。</p> + +<p>让我们举一个简单的例子来说明我们的意思。首先，从CSS中删除现有的 <code>p:nth-of-type(1)</code> 和<code>.positioned</code> 规则。</p> + +<p>现在，更新 <code>body</code> 规则以删除<code>position: relative;</code> 声明并添加固定高度，如此：</p> + +<pre class="notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>现在我们要给{{htmlelement("h1")}}元素 <code>position: fixed;</code>，并让它坐在视口的顶部中心。将以下规则添加到CSS：</p> + +<pre class="notranslate">h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +}</pre> + +<p> <code>top: 0;</code>是要使它贴在屏幕的顶部；我们然后给出标题与内容列相同的宽度，并使用可靠的老技巧 <code>margin: 0 auto;</code> 使它居中。 然后我们给它一个白色背景和一些内边距，所以内容将不会在它下面可见。</p> + +<p>如果您现在保存并刷新，您会看到一个有趣的小效果，标题保持固定，内容显示向上滚动并消失在其下。 但是我们可以改进这一点——目前标题下面挡住一些内容的开头。这是因为定位的标题不再出现在文档流中，所以其他内容向上移动到顶部。 我们要把它向下移动一点；我们可以通过在第一段设置一些顶部边距来做到这一点。添加：</p> + +<pre class="notranslate">p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p>你现在应该看到完成的例子：</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">I'm not positioned any more...</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('固定定位', '100%', 400) }}</p> + +<div class="note"> +<p><strong>注意：</strong>你可以在这里看到这个例子<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">see source code</a>).</p> +</div> + +<h3 id="position_sticky">position: sticky</h3> + +<p>还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。</p> + +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<p><code>position: sticky</code> 的另一种有趣且常用的用法，是创建一个滚动索引页面。在此页面上，不同的标题会停留在页面顶部。这样的示例的标记可能如下所示：</p> + +<pre class="notranslate"><h1>Sticky positioning</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl></pre> + +<p>CSS可能如下所示。在正常布局流中，{{htmlelement("dt")}}元素将随内容滚动。当我们在{{htmlelement("dt")}}元素上添加<code>position: sticky</code>，并将{{cssxref("top")}}的值设置为0，当标题滚动到视口的顶部时，支持此属性的浏览器会将标题粘贴到那个位置。随后，每个后续标题将替换前一个标题，直到它向上滚动到该位置。</p> + +<pre class="notranslate">dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<div class="hidden"> +<pre class="notranslate">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<pre class="notranslate"><h1>Sticky positioning</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl></pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> 查看这个例子(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">see source code</a>)。</p> +</div> + +<h2 id="试试你的技术!">试试你的技术!</h2> + +<p>这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Position_skills">试试你的技术</a>。</p> + +<h2 id="总结">总结</h2> + +<p>我相信你用基本定位愉快地玩耍；它是创建复杂的CSS布局和UI功能背后的基本工具之一。 考虑到这一点，在下一篇文章中，我们将更有趣的定位——我们将进一步，开始建立一些真实世界有用的东西。</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">布局介绍</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">定位练习案例</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> +</ul> |