diff options
Diffstat (limited to 'files/zh-cn/learn/css')
11 files changed, 21 insertions, 21 deletions
diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html index ebbfda7feb..5bf5e8b8f0 100644 --- a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -38,7 +38,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p>在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading和{{htmlelement("span")}}元素。</p> -<p><strong>尝试修改为任何可用的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/color_value"><color></a> 值。</strong></p> +<p><strong>尝试修改为任何可用的 <a href="/zh-CN/docs/Web/CSS/color_value"><color></a> 值。</strong></p> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> @@ -242,7 +242,7 @@ background-position: 10px 20px, top right;</pre> } </code></pre> <div class="blockIndicator note"> -<p><strong>注意</strong>：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性(例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">详情</a>。</p> +<p><strong>注意</strong>：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性(例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 <a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">详情</a>。</p> </div> <p><strong>有各种各样的样式可以用于边框。在下面的例子中，为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。</strong></p> diff --git a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html index 50203520bd..04abdac441 100644 --- a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html +++ b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <tbody> <tr> <th scope="row">必备条件:</th> - <td>会使用计算机、<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>、基本了解<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>、有 HTML 基础（请参考<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML 导论</a>）、了解 CSS 工作（请参考 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> + <td>会使用计算机、<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>、基本了解<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Dealing_with_files">文件处理</a>、有 HTML 基础（请参考<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"> HTML 导论</a>）、了解 CSS 工作（请参考 <a href="/zh-CN/docs/Learn/CSS/First_steps">CSS first steps</a>）。</td> </tr> <tr> <th scope="row">目标:</th> @@ -22,19 +22,19 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS <h2 id="如何使用浏览器开发者工具">如何使用浏览器开发者工具</h2> -<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 解释了如何在不同的浏览器和平台上打开这些工具。你可能会选择大部分时间在某个浏览器上开发去熟悉里面的工具，不过你还是有必要了解如何在其它浏览器中打开同样的工具。要是你看到多个浏览器间不同的渲染结果，这就会很方便了。</p> +<p><a href="/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 解释了如何在不同的浏览器和平台上打开这些工具。你可能会选择大部分时间在某个浏览器上开发去熟悉里面的工具，不过你还是有必要了解如何在其它浏览器中打开同样的工具。要是你看到多个浏览器间不同的渲染结果，这就会很方便了。</p> -<p>你还会发现，不同的浏览器弹出开发者工具时会选择把重点放到不同的区域。例如，Firefox 有不错的工具用来可视化处理 CSS 布局，让你能够检查和编辑 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>、<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>。不过，浏览器都有类似的基础工具用来检查作用于页面元素的 CSS 属性和值，并对它们进行更改。</p> +<p>你还会发现，不同的浏览器弹出开发者工具时会选择把重点放到不同的区域。例如，Firefox 有不错的工具用来可视化处理 CSS 布局，让你能够检查和编辑 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>、<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>、<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>。不过，浏览器都有类似的基础工具用来检查作用于页面元素的 CSS 属性和值，并对它们进行更改。</p> <p>我们这节课会重点看用于处理 CSS 的开发者工具中的一些有用特性。为此，我会用<a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">一个示例</a>。想跟着学习的话，就在新标签页加载该网页吧，并打开开发者工具（上述文章对该工具有描述）。</p> <h2 id="比较_DOM_和_View_Source">比较 DOM 和 View Source</h2> -<p>刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。</p> +<p>刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 <a href="/zh-CN/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a> 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。</p> <p>浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是<code><h2></code>，结束标签是<code></h3></code>。），浏览器会尽力弄清你的意图，之后DOM中的HTML就以 <code><h2></code> 起始，以 <code></h2></code> 结束了。浏览器还会处理好 HTML 文档， JavaScript 做出的更改都会由 DOM 表现出来。</p> -<p>相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。</p> +<p>相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 <a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。</p> <h2 id="审查_CSS">审查 CSS</h2> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html index 3766312aff..54c4e46f08 100644 --- a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Combinators <tbody> <tr> <th scope="row">学习前提：</th> - <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> </tr> <tr> <th scope="row">目标：</th> diff --git a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index 776b149893..af123b4dc3 100644 --- a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -11,7 +11,7 @@ translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-el <tbody> <tr> <th scope="row">学习前提：</th> - <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> + <td>基础电脑知识，<a href="https://developer.mozilla.org/zh-CN/Learn/Getting_started_with_the_web/Installing_basic_software">安装了基本的软件</a>，<a href="https://developer.mozilla.org/和CN/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>的基本知识， HTML基础（学习<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>），以及对CSS工作原理的了解（学习<a href="/zh-CN/docs/Learn/CSS/First_steps">CSS初步</a>）</td> </tr> <tr> <th scope="row">目标：</th> diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html index 81505125b2..7d09b770d9 100644 --- a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html @@ -36,7 +36,7 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS <h2 id="设置具体的尺寸">设置具体的尺寸</h2> -<p>我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为<strong>外部尺寸</strong>。以上面例子中的 <code><div></code> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">上一课</a>有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。</p> +<p>我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为<strong>外部尺寸</strong>。以上面例子中的 <code><div></code> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">上一课</a>有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html index cce5429572..4027d5f1f6 100644 --- a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html +++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html @@ -278,7 +278,7 @@ table { <h2 id="小试牛刀！">小试牛刀！</h2> -<p>我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a>。</p> +<p>我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见<a href="/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks">Test your skills: tables</a>。</p> <h2 id="总结">总结</h2> diff --git a/files/zh-cn/learn/css/css_layout/flexbox/index.html b/files/zh-cn/learn/css/css_layout/flexbox/index.html index 7e53a7922c..f0224db80d 100644 --- a/files/zh-cn/learn/css/css_layout/flexbox/index.html +++ b/files/zh-cn/learn/css/css_layout/flexbox/index.html @@ -320,7 +320,7 @@ article:nth-of-type(3) { <h2 id="测试你的技能">测试你的技能</h2> -<p>我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识? 在你继续学习前，你可以进行<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">测试</a>来验证你是否掌握了这些知识。</p> +<p>我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识? 在你继续学习前，你可以进行<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox_skills">测试</a>来验证你是否掌握了这些知识。</p> <h2 id="总结">总结</h2> diff --git a/files/zh-cn/learn/css/css_layout/grids/index.html b/files/zh-cn/learn/css/css_layout/grids/index.html index eca25a84b8..ab825e40e4 100644 --- a/files/zh-cn/learn/css/css_layout/grids/index.html +++ b/files/zh-cn/learn/css/css_layout/grids/index.html @@ -471,7 +471,7 @@ aside { <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> +<p><strong>注意：</strong>你也可以用<code>-1</code>来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格，对于<a href="/zh-CN/docs/Glossary/Grid">隐式网格</a><code>-1</code>不一定能定位到最后一条分隔线。</p> </div> <h2 id="使用grid-template-areas属性放置元素">使用grid-template-areas属性放置元素</h2> @@ -679,13 +679,13 @@ aside { <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>你可以使用<a href="/zh-CN/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> +<p>你已经读完了这篇教程，那你记住那些最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grid_skills">技能测试：网格</a>.</p> <h2 id="小结">小结</h2> @@ -694,8 +694,8 @@ aside { <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> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS网格指南</a></li> + <li><a href="/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> diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html index 7657c460f7..a96e967bad 100644 --- a/files/zh-cn/learn/css/css_layout/introduction/index.html +++ b/files/zh-cn/learn/css/css_layout/introduction/index.html @@ -98,7 +98,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <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>Flexbox 是CSS 弹性盒子布局模块（<a href="/zh-CN/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> 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 index 362c46ddf3..ccf4dfc477 100644 --- a/files/zh-cn/learn/css/css_layout/normal_flow/index.html +++ b/files/zh-cn/learn/css/css_layout/normal_flow/index.html @@ -33,9 +33,9 @@ translation_of: Learn/CSS/CSS_layout/Normal_Flow <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="/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a>的内容宽度是其父元素的100%，其高度与其内容高度一致。<a href="/zh-CN/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>这样解释了独立元素的布局，但是元素之间又是如何相互影响的呢？ 正常布局流（在布局介绍里提到过）是一套在浏览器视口内放置、组织元素的系统。默认的，块级元素按照基于其父元素的<a href="/zh-CN/docs/Web/CSS/writing-mode">书写顺序</a>(<em>默认值:</em> horizontal-tb)的<em>块流动方向(block flow direction)</em>放置 --- 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。</p> <p>内联元素的表现有所不同 --- 它们不会另起一行；只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。如果空间不够，溢出的文本或元素将移到新的一行。</p> diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html index 3965d4bef1..d5e21680d0 100644 --- a/files/zh-cn/learn/css/css_layout/positioning/index.html +++ b/files/zh-cn/learn/css/css_layout/positioning/index.html @@ -596,7 +596,7 @@ dt { <h2 id="试试你的技术!">试试你的技术!</h2> -<p>这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Position_skills">试试你的技术</a>。</p> +<p>这篇文章到此为止了，但你们能记住最重要的信息吗？在继续之前，您可以找到一些进一步的测试来验证是否完全掌握了这个知识：<a href="/zh-CN/docs/Learn/CSS/CSS_layout/Position_skills">试试你的技术</a>。</p> <h2 id="总结">总结</h2> |