diff options
Diffstat (limited to 'files/zh-cn/learn/css/css_layout')
5 files changed, 10 insertions, 10 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 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> |