diff options
Diffstat (limited to 'files/zh-cn/web/css/display/index.html')
| -rw-r--r-- | files/zh-cn/web/css/display/index.html | 58 |
1 files changed, 29 insertions, 29 deletions
diff --git a/files/zh-cn/web/css/display/index.html b/files/zh-cn/web/css/display/index.html index 189002afdb..8605b74a25 100644 --- a/files/zh-cn/web/css/display/index.html +++ b/files/zh-cn/web/css/display/index.html @@ -6,7 +6,7 @@ tags: translation_of: Web/CSS/display --- <div>{{CSSRef}} -<p><strong><code>display</code></strong> 属性可以设置元素的内部和外部显示类型 <em>display types</em>。元素的外部显示类型 <em>outer display types</em> 将决定该元素在<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout">流式布局</a>中的表现（<a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout">块级或内联元素</a>）；元素的内部显示类型 <em>inner display types</em> 可以控制其子元素的布局（例如：<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>，<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout">grid</a> 或 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">flex</a>）。</p> +<p><strong><code>display</code></strong> 属性可以设置元素的内部和外部显示类型 <em>display types</em>。元素的外部显示类型 <em>outer display types</em> 将决定该元素在<a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout">流式布局</a>中的表现（<a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout">块级或内联元素</a>）；元素的内部显示类型 <em>inner display types</em> 可以控制其子元素的布局（例如：<a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>，<a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">grid</a> 或 <a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout">flex</a>）。</p> </div> <p>在 <strong>CSS 规范</strong>（特指 CSS Level 1/2/3 规范）中查阅 <strong><code>display</code></strong> 属性的所有取值时需要注意：个别取值的详细信息记录在独立的规范中。 例如，<code>display: flex</code> 的详细信息在 <em>CSS Flexible Box Model</em> 规范中记录。可以在本文档末尾的表格中查看所有有关的规范。</p> @@ -75,7 +75,7 @@ translation_of: Web/CSS/display } </pre> -<p>有关规范变更的更多信息，查阅文章 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/display/two-value_syntax_of_display">Adapting to the new two-value syntax of display</a>。</p> +<p>有关规范变更的更多信息，查阅文章 <a href="/zh-CN/docs/Web/CSS/display/two-value_syntax_of_display">Adapting to the new two-value syntax of display</a>。</p> <h3 id="全局设置">全局设置</h3> @@ -89,47 +89,47 @@ display: unset;</pre> <p>上面 {{anch("语法")}} 部分提供了 <strong><code>display</code></strong> 取值的多个示例。下面的资料将详细介绍 <strong><code>display</code></strong> 的各个取值。</p> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/display/two-value_syntax_of_display">接受 display 新的二值语法</a></li> + <li><a href="/zh-CN/docs/Web/CSS/display/two-value_syntax_of_display">接受 display 新的二值语法</a></li> </ul> <h3 id="CSS_Flow_Layout_display_block_display_inline">CSS Flow Layout (<code>display: block</code>, <code>display: inline</code>)</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">块级和内联元素在正常流中的布局</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">流布局和溢出</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">流布局和书写方法</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">流内和流外</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">块级和内联元素在正常流中的布局</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">流布局和溢出</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">流布局和书写方法</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">流内和流外</a></li> </ul> <h3 id="display_flex"><code>display: flex</code></h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">弹性盒模型的基本概念</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">弹性盒模型的基本概念</a></li> <li>在弹性容器中对齐项目</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items Along the Main Axis</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering Flex Items</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items Along the Main Axis</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering Flex Items</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a></li> </ul> <h3 id="display_grid"><code>display: grid</code></h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic Concepts of Grid Layout</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic Concepts of Grid Layout</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> </ul> <p>除此之外，你可以在 MDN 上找到布局模型的详细解释：</p> @@ -164,7 +164,7 @@ display: unset;</pre> <ul> <li><a class="external external-icon" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li> <li><a class="external external-icon" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> </ul> @@ -220,7 +220,7 @@ display: unset;</pre> <ul> <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and inline layout in normal flow</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">Introduction to formatting contexts</a></li> + <li><a href="/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">Introduction to formatting contexts</a></li> <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li> <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li> </ul> |