From 97fd5e22b6af3a33db4f99cb8dd075e43717e46b Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 31 Jan 2024 05:43:26 +0100 Subject: [PATCH] [zh-cn] sync translated content (#18100) Co-authored-by: allo --- files/zh-cn/_redirects.txt | 5 +- files/zh-cn/_wikihistory.json | 86 +++++++++---------- .../glossary/block-level_content/index.md | 2 +- .../overflowing_content/index.md | 2 +- .../mozilla/firefox/releases/25/index.md | 6 +- .../tutorial/optimizing_canvas/index.md | 4 +- .../web/api/cssstylesheet/insertrule/index.md | 4 +- .../document_object_model/whitespace/index.md | 4 +- files/zh-cn/web/api/element/closest/index.md | 4 +- .../web/api/element/queryselector/index.md | 4 +- files/zh-cn/web/api/transitionevent/index.md | 12 +-- .../matrix_math_for_the_web/index.md | 4 +- files/zh-cn/web/css/background-image/index.md | 23 +++-- files/zh-cn/web/css/contain/index.md | 2 +- .../web/css/css_animations/tips/index.md | 2 +- .../using_css_animations/index.md | 8 +- .../mastering_margin_collapsing/index.md | 2 +- .../block_formatting_context/index.md | 2 +- .../in_flow_and_out_of_flow/index.md | 2 +- .../index.md | 10 +-- .../understanding_z-index/index.md | 16 ++-- files/zh-cn/web/css/display/index.md | 4 +- files/zh-cn/web/css/flex-direction/index.md | 20 +++-- files/zh-cn/web/css/flex-flow/index.md | 33 +++++-- files/zh-cn/web/css/float/index.md | 2 +- files/zh-cn/web/css/image/index.md | 13 +-- files/zh-cn/web/css/index.md | 2 +- .../css/inline_formatting_context/index.md | 8 +- files/zh-cn/web/css/opacity/index.md | 4 +- files/zh-cn/web/css/overflow/index.md | 4 +- files/zh-cn/web/css/reference/index.md | 6 +- .../web/css/visual_formatting_model/index.md | 4 +- .../zh-cn/web/html/element/fieldset/index.md | 2 +- files/zh-cn/web/html/element/li/index.md | 8 +- files/zh-cn/web/html/element/link/index.md | 10 +-- files/zh-cn/web/html/element/style/index.md | 2 +- 36 files changed, 180 insertions(+), 146 deletions(-) rename files/zh-cn/web/{guide/css => css/css_display}/block_formatting_context/index.md (99%) diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 5c8ebbc92ba4aa..1a87dcc5033f9f 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -25,7 +25,7 @@ /zh-CN/docs/CSS/Adjacent_sibling_selectors /zh-CN/docs/Web/CSS/Next-sibling_combinator /zh-CN/docs/CSS/At-rule /zh-CN/docs/Web/CSS/At-rule /zh-CN/docs/CSS/Attribute_selectors /zh-CN/docs/Web/CSS/Attribute_selectors -/zh-CN/docs/CSS/Block_formatting_context /zh-CN/docs/Web/Guide/CSS/Block_formatting_context +/zh-CN/docs/CSS/Block_formatting_context /zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context /zh-CN/docs/CSS/CSS_Reference/Webkit_Extensions /zh-CN/docs/Web/CSS/WebKit_Extensions /zh-CN/docs/CSS/CSS_animated_properties /zh-CN/docs/Web/CSS/CSS_animated_properties /zh-CN/docs/CSS/CSS_reference /zh-CN/docs/Web/CSS/Reference @@ -2059,7 +2059,7 @@ /zh-CN/docs/Web/CSS/Adjacent_sibling_combinator /zh-CN/docs/Web/CSS/Next-sibling_combinator /zh-CN/docs/Web/CSS/Adjacent_sibling_selectors /zh-CN/docs/Web/CSS/Next-sibling_combinator /zh-CN/docs/Web/CSS/All_About_The_Containing_Block /zh-CN/docs/Web/CSS/Containing_block -/zh-CN/docs/Web/CSS/Block_formatting_context /zh-CN/docs/Web/Guide/CSS/Block_formatting_context +/zh-CN/docs/Web/CSS/Block_formatting_context /zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context /zh-CN/docs/Web/CSS/CSS3中的关键帧 /zh-CN/docs/Web/CSS/@keyframes /zh-CN/docs/Web/CSS/CSSOM_View/坐标系 /zh-CN/docs/Web/CSS/CSSOM_view/Coordinate_systems /zh-CN/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator @@ -2296,6 +2296,7 @@ /zh-CN/docs/Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges /zh-CN/docs/Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges /zh-CN/docs/Web/Guide/Audio_and_video_manipulation /zh-CN/docs/Web/Media/Audio_and_video_manipulation /zh-CN/docs/Web/Guide/CSS /zh-CN/docs/Learn/CSS +/zh-CN/docs/Web/Guide/CSS/Block_formatting_context /zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context /zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites /zh-CN/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS /zh-CN/docs/Web/Guide/CSS/Consistent_list_indentation /zh-CN/docs/Web/CSS/CSS_lists/Consistent_list_indentation /zh-CN/docs/Web/Guide/CSS/Counters /zh-CN/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 687338934d4e58..6de5bd3e4ad1e8 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -17366,6 +17366,49 @@ "modified": "2019-03-23T23:28:24.261Z", "contributors": ["Ende93", "Jiang-Xuan", "Jiasm", "Nightingale"] }, + "Web/CSS/CSS_display/Block_formatting_context": { + "modified": "2020-12-09T10:24:24.921Z", + "contributors": [ + "xmasuhai", + "SDUTWSL", + "Ninglo", + "MinimalistYing", + "shanyuhai123", + "ylc395", + "GlowMonster", + "SageX", + "dylanyg", + "xunzhonglee", + "wavesheep", + "Mookiepiece", + "awayjin", + "dongsuo", + "ju1234", + "maoyumaoxun", + "helloyong", + "Terry.Qiao", + "Akiq2016", + "luoway", + "lanyuechen", + "zerosrat", + "young122849", + "Programmox", + "herofei", + "xgqfrms-GitHub", + "XiongAmao", + "yisibl", + "Ende93", + "zengkan0703", + "TiaossuP", + "kevinfszu", + "FredWe", + "ziyunfei", + "haofu", + "xmlovecss", + "teoli", + "yan" + ] + }, "Web/CSS/CSS_flexible_box_layout": { "modified": "2019-09-20T14:46:03.892Z", "contributors": [ @@ -20886,49 +20929,6 @@ "ethertank" ] }, - "Web/Guide/CSS/Block_formatting_context": { - "modified": "2020-12-09T10:24:24.921Z", - "contributors": [ - "xmasuhai", - "SDUTWSL", - "Ninglo", - "MinimalistYing", - "shanyuhai123", - "ylc395", - "GlowMonster", - "SageX", - "dylanyg", - "xunzhonglee", - "wavesheep", - "Mookiepiece", - "awayjin", - "dongsuo", - "ju1234", - "maoyumaoxun", - "helloyong", - "Terry.Qiao", - "Akiq2016", - "luoway", - "lanyuechen", - "zerosrat", - "young122849", - "Programmox", - "herofei", - "xgqfrms-GitHub", - "XiongAmao", - "yisibl", - "Ende93", - "zengkan0703", - "TiaossuP", - "kevinfszu", - "FredWe", - "ziyunfei", - "haofu", - "xmlovecss", - "teoli", - "yan" - ] - }, "Web/HTML": { "modified": "2020-05-18T02:45:10.401Z", "contributors": [ diff --git a/files/zh-cn/glossary/block-level_content/index.md b/files/zh-cn/glossary/block-level_content/index.md index 9a66371294c3a3..8d9790d64e5ae8 100644 --- a/files/zh-cn/glossary/block-level_content/index.md +++ b/files/zh-cn/glossary/block-level_content/index.md @@ -37,6 +37,6 @@ p { ## 参见 - [行级内容](/zh-CN/docs/Glossary/Inline-level_content) -- [块格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) +- [区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context) - {{cssxref("display")}} - [`writing-mode`](/zh-CN/docs/Web/CSS/writing-mode) diff --git a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md index a6d24d31a28e81..232751b1b7cbc4 100644 --- a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md +++ b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md @@ -90,7 +90,7 @@ slug: Learn/CSS/Building_blocks/Overflowing_content ## 溢出建立了区块格式化上下文 -CSS 中有所谓[**区块格式化上下文**（Block Formatting Context，BFC）](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)的概念。现在你不用太过在意，但是你应该知道，在你使用诸如 `scroll` 或者 `auto` 的时候，你就建立了一个块级排版上下文。结果就是，你改变了 `overflow` 的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。 +CSS 中有所谓[**区块格式化上下文**（Block Formatting Context，BFC）](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)的概念。现在你不用太过在意，但是你应该知道，在你使用诸如 `scroll` 或者 `auto` 的时候，你就建立了一个块级排版上下文。结果就是，你改变了 `overflow` 的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。 ## 网页设计时不需要的溢出 diff --git a/files/zh-cn/mozilla/firefox/releases/25/index.md b/files/zh-cn/mozilla/firefox/releases/25/index.md index 3994ca7e6c7448..2ebc0946e321d7 100644 --- a/files/zh-cn/mozilla/firefox/releases/25/index.md +++ b/files/zh-cn/mozilla/firefox/releases/25/index.md @@ -9,9 +9,9 @@ slug: Mozilla/Firefox/Releases/25 ### CSS -- 新增了 {{cssxref("background-attachment")}} 属性值 `local` ([Firefox bug 483446](https://bugzil.la/483446)). -- 新增了一个 Mozilla 私有的媒体查询属性：[`-moz-os-version`](/zh-CN/docs/Web/Guide/CSS/Media_queries#-moz-os-version), 目前该属性只支持 Windows ([Firefox bug 810399](https://bugzil.la/810399)). -- 实现了新的 {{cssxref("-moz-osx-font-smoothing")}} CSS 属性 ([Firefox bug 857142](https://bugzil.la/857142)) +- 新增了 {{cssxref("background-attachment")}} 属性值 `local`（[Firefox bug 483446](https://bugzil.la/483446)）。 +- 新增了一个 Mozilla 私有的媒体查询属性：[`-moz-os-version`](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries#-moz-os-version)，目前该属性只支持 Windows（[Firefox bug 810399](https://bugzil.la/810399)）。 +- 实现了新的 {{cssxref("-moz-osx-font-smoothing")}} CSS 属性（[Firefox bug 857142](https://bugzil.la/857142)） ### HTML diff --git a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 2ad82262a3d8b3..d1a41ce9639f20 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -77,9 +77,9 @@ ctx.drawImage(myImage, 0.3, 0.5); 如果像大多数游戏那样，你有一张静态的背景图，用一个静态的{{HTMLElement("div")}}元素，结合{{cssxref("background")}} 特性，以及将它置于画布元素之后。这么做可以避免在每一帧在画布上绘制大图。 -### 用 CSS transforms 特性缩放画布 +### 用 CSS 变换特性缩放画布 -[CSS transforms](/zh-CN/docs/Web/Guide/CSS/Using_CSS_transforms) 使用 GPU，因此速度更快。最好的情况是不直接缩放画布，或者具有较小的画布并按比例放大，而不是较大的画布并按比例缩小。 +[CSS 变换](/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)使用 GPU，因此速度更快。最好的情况是不直接缩放画布，或者具有较小的画布并按比例放大，而不是较大的画布并按比例缩小。 ```js var scaleX = window.innerWidth / canvas.width; diff --git a/files/zh-cn/web/api/cssstylesheet/insertrule/index.md b/files/zh-cn/web/api/cssstylesheet/insertrule/index.md index 4e98ddaf8c0205..a1d2ee1fa1d26e 100644 --- a/files/zh-cn/web/api/cssstylesheet/insertrule/index.md +++ b/files/zh-cn/web/api/cssstylesheet/insertrule/index.md @@ -21,8 +21,8 @@ stylesheet.insertRule(rule [, index]) - : 一个包含了将要插入的规则的 {{domxref("DOMString")}}。规则字符串必须包含的内容取决于它的类型： - - **[rule-sets](/zh-CN/docs/Web/CSS/Syntax#CSS_statements) 类型**（普通带有选择器的规则）**，**需要[选择器](/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors)和样式声明； - - **[at-rules](/zh-CN/docs/Web/CSS/At-rule) 类型**（以 `@` 开头的规则，如 `@import, @media` 等）**，**需要 at-identifier 和规则内容。 + - **[rule-set](/zh-CN/docs/Web/CSS/Syntax#css_语句) 类型**（普通带有选择器的规则），需要[选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)和样式声明； + - **[at-rule](/zh-CN/docs/Web/CSS/At-rule) 类型**（以 `@` 开头的规则，如 `@import, @media` 等），需要 at-identifier 和规则内容。 - `index` {{optional_inline}} - : 一个小于或等于 `stylesheet.cssRules.length` 的正整数，表示新插入的规则在`{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules` 中的位置。默认值是 `0`。（在过去的实现中，这个参数是必需的，详情参见[浏览器兼容性](#浏览器兼容性)。） diff --git a/files/zh-cn/web/api/document_object_model/whitespace/index.md b/files/zh-cn/web/api/document_object_model/whitespace/index.md index b22dc1be224f81..cb7106e9ddbd98 100644 --- a/files/zh-cn/web/api/document_object_model/whitespace/index.md +++ b/files/zh-cn/web/api/document_object_model/whitespace/index.md @@ -137,9 +137,9 @@ slug: Web/API/Document_Object_Model/Whitespace > **备注：** 从版本 52 开始，[Firefox 开发者工具](https://firefox-source-docs.mozilla.org/devtools-user/index.html)支持高亮文本节点，使得观察包含节点中包含的空白字符变得更加容易。纯的空白符节点会有一个“whitespace”标记。 -### 在块格式化上下文的空白符 +### 在区块格式化上下文的空白符 -上面我们只是看了包含行内元素的元素，以及行内格式化上下文。如果一个元素至少包含一个块元素，那么它就会建立所谓的[块格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)。 +上面我们只是看了包含行内元素的元素，以及行内格式化上下文。如果一个元素至少包含一个块元素，那么它就会建立所谓的[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)。 这种情况下，空白符的处理方式非常不同。 diff --git a/files/zh-cn/web/api/element/closest/index.md b/files/zh-cn/web/api/element/closest/index.md index 18b039e905a6f0..cc44f53ef888a3 100644 --- a/files/zh-cn/web/api/element/closest/index.md +++ b/files/zh-cn/web/api/element/closest/index.md @@ -114,5 +114,5 @@ if (window.Element && !Element.prototype.closest) { ## 参见 - {{domxref("Element")}} 接口。 -- [选择器语法](/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors) -- 其他相关选择器方法：{{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}. +- [选择器语法](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors) +- 其他相关选择器方法：{{domxref("element.querySelector()")}} 和 {{domxref("element.matches()")}}。 diff --git a/files/zh-cn/web/api/element/queryselector/index.md b/files/zh-cn/web/api/element/queryselector/index.md index 7b065dd5d8fd75..388af902e2a7e9 100644 --- a/files/zh-cn/web/api/element/queryselector/index.md +++ b/files/zh-cn/web/api/element/queryselector/index.md @@ -12,12 +12,12 @@ element = baseElement.querySelector(selectors); ``` - `element` 和 `baseElement` 是 {{domxref("element")}} 对象。 -- `selectors` 是一个 CSS 选择器字符串 ( [selectors](/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors) ) +- `selectors` 是一个 CSS [选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)字符串。 ### 参数 - `selectors` - - : 一组用来匹配{{domxref("Element")}} `baseElement`后代元素的选择器[selectors](/zh-CN/docs/Web/Guide/CSS/Getting_Started/Selectors)；必须是合法的 css 选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。 + - : 一组用来匹配 {{domxref("Element")}} `baseElement` 后代元素的[选择器](/zh-CN/docs/Learn/CSS/Building_blocks/Selectors)；必须是合法的 css 选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。 ### 返回值 diff --git a/files/zh-cn/web/api/transitionevent/index.md b/files/zh-cn/web/api/transitionevent/index.md index 81ef59253ec269..f606e11f1d2e15 100644 --- a/files/zh-cn/web/api/transitionevent/index.md +++ b/files/zh-cn/web/api/transitionevent/index.md @@ -5,7 +5,7 @@ slug: Web/API/TransitionEvent {{APIRef("CSSOM")}} {{SeeCompatTable}} -TransitonEvent 接口指那些提供了与 [transition](/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions) 有关信息的事件。 +TransitonEvent 接口指那些提供了与[过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions)有关信息的事件。 ## 属性 @@ -30,15 +30,15 @@ _同时也继承了父类 {{domxref("Event")}}_ 的属性。 - {{domxref("TransitionEvent.initTransitionEvent()")}} {{non-standard_inline}}{{deprecated_inline}} - : 使用已经废弃的{{domxref("Document.createEvent()", "Document.createEvent(\"TransitionEvent\")")}} 方法初始化已经创建的 TransitonEvent 事件。 -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} -## See also +## 参见 -- [Using CSS transitions](/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions) -- CSS properties: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}. +- [使用 CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) +- CSS 属性：{{cssxref("transition")}}、{{cssxref("transition-delay")}}、{{cssxref("transition-duration")}}、{{cssxref("transition-property")}}、{{cssxref("transition-timing-function")}}。 diff --git a/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md b/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md index 1031aded3a57e1..269d5bfc00f483 100644 --- a/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md +++ b/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md @@ -5,9 +5,9 @@ slug: Web/API/WebGL_API/Matrix_math_for_the_web {{DefaultAPISidebar("WebGL")}} -矩阵可以用于表示空间中的对象的变换，并且是 Web 页面可视化的重要工具。本文探索如何创建并配合[CSS3 变换](/zh-CN/docs/Web/Guide/CSS/Using_CSS_transforms)和 matrix3d 变换类型使用矩阵。 +矩阵可以用于表示空间中的对象的变换，并且是 Web 页面可视化的重要工具。本文探索如何创建并配合 [CSS 变换](/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms)和 matrix3d 变换类型使用矩阵。 -虽然本文为了便于解释而使用了 CSS3，矩阵却是许多技术中的核心概念，包括 WebGL 和着色器。本文也是[MDN content kit](https://github.com/TatumCreative/mdn-matrix-math)的一部分。示例使用了一组全局对象 MDN 下的[工具函数](https://github.com/TatumCreative/mdn-webgl)。 +虽然本文为了便于解释而使用了 CSS，矩阵却是许多技术中的核心概念，包括 WebGL 和着色器。本文也是 [MDN content kit](https://github.com/TatumCreative/mdn-matrix-math) 的一部分。示例使用了一组全局对象 MDN 下的[工具函数](https://github.com/TatumCreative/mdn-webgl)。 ## 什么是变换矩阵？ diff --git a/files/zh-cn/web/css/background-image/index.md b/files/zh-cn/web/css/background-image/index.md index 7f81399e168376..d59a1db8178444 100644 --- a/files/zh-cn/web/css/background-image/index.md +++ b/files/zh-cn/web/css/background-image/index.md @@ -98,13 +98,22 @@ div { {{Compat}} -\[1] 如果 `about:config` 中 `browser.display.use_document_colors` 被设置为 `false`, 背景图像将不会展示。 - -\[2] 当前的 iOS Safari 版本 (5.0) CSS 背景属性对 SVG 的支持并不完善。iOS Safari (5.0) 之前的版本亦是如此。 - ## 参见 -- [Implementing image sprites in CSS](/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites) +- [在 CSS 中实现图像合并](/zh-CN/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS) - {{HTMLElement("img")}} -- 与图像相关的数据类型：{{cssxref("<image>")}}, {{cssxref("<gradient>")}} -- 与图像相关的函数：{{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}} +- 与图像相关的数据类型：{{cssxref("<image>")}}、{{cssxref("<gradient>")}} +- 与图像相关的函数： + + - {{cssxref("cross-fade", "cross-fade()")}} + - {{cssxref("element", "element()")}} + - {{cssxref("image/image", "image()")}} + - {{cssxref("image/image-set", "image-set()")}} + - {{cssxref("gradient/linear-gradient", "linear-gradient()")}} + - {{cssxref("gradient/radial-gradient", "radial-gradient()")}} + - {{cssxref("gradient/conic-gradient", "conic-gradient()")}} + - {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} + - {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} + - {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} + - {{cssxref("image/paint", "paint()")}} + - {{cssxref("url", "url()")}} diff --git a/files/zh-cn/web/css/contain/index.md b/files/zh-cn/web/css/contain/index.md index 186c7912bf8aa4..531b2b75fcc683 100644 --- a/files/zh-cn/web/css/contain/index.md +++ b/files/zh-cn/web/css/contain/index.md @@ -17,7 +17,7 @@ slug: Web/CSS/contain > > 1. 新的[包含区块](/zh-CN/docs/Web/CSS/Containing_block)（针对其 {{CSSXref("position")}} 属性为 `absolute` 或 `fixed` 的后代元素）。 > 2. 新的[层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)。 -> 3. 新的[区块格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)。 +> 3. 新的[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)。 ## 语法 diff --git a/files/zh-cn/web/css/css_animations/tips/index.md b/files/zh-cn/web/css/css_animations/tips/index.md index 124cf002c75486..1b1f0319d6fedc 100644 --- a/files/zh-cn/web/css/css_animations/tips/index.md +++ b/files/zh-cn/web/css/css_animations/tips/index.md @@ -106,5 +106,5 @@ document.querySelector(".runButton").addEventListener("click", play, false); ## 参见 -- [Using CSS transitions](/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions) +- [使用 CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) - {{domxref("Window.requestAnimationFrame()")}} diff --git a/files/zh-cn/web/css/css_animations/using_css_animations/index.md b/files/zh-cn/web/css/css_animations/using_css_animations/index.md index 9652cc4b64ae0c..1d5c9d8488e17e 100644 --- a/files/zh-cn/web/css/css_animations/using_css_animations/index.md +++ b/files/zh-cn/web/css/css_animations/using_css_animations/index.md @@ -331,8 +331,8 @@ function listener(e) { {{EmbedLiveSample('使用动画事件', '600', '300')}} -## See also +## 参见 -- {{ domxref("AnimationEvent", "AnimationEvent") }} -- [Detecting CSS animation support](/zh-CN/docs/CSS/CSS_animations/Detecting_CSS_animation_support) -- [Using CSS transitions](/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions) +- {{domxref("AnimationEvent", "AnimationEvent")}} +- [CSS 动画的技巧](/zh-CN/docs/Web/CSS/CSS_animations/Tips) +- [使用 CSS 过渡](/zh-CN/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) diff --git a/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.md index aa40b72724a2cc..8ff3d360c84a83 100644 --- a/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.md +++ b/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.md @@ -12,7 +12,7 @@ slug: Web/CSS/CSS_box_model/Mastering_margin_collapsing - 相邻的兄弟元素 - : 相邻的同级元素之间的外边距会被折叠（除非后面的元素需要[清除](/zh-CN/docs/Web/CSS/clear)之前的浮动）。 - 没有内容将父元素和后代元素分开 - - : 如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建[区块格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)或[_间隙_](/zh-CN/docs/Web/CSS/clear)来分隔块级元素的上边距（{{cssxref("margin-top")}}）与其内一个或多个子代块级元素的上边距（{{cssxref("margin-top")}}）；或者没有设定边框、内边距、行级内容、高度（{{cssxref("height")}}）或最小高度（{{cssxref("min-height")}}）来分隔块级元素的下边距（{{cssxref("margin-bottom")}}）与其内部的一个或多个后代后代块元素的下边距（{{cssxref("margin-bottom")}}），则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。 + - : 如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)或[_间隙_](/zh-CN/docs/Web/CSS/clear)来分隔块级元素的上边距（{{cssxref("margin-top")}}）与其内一个或多个子代块级元素的上边距（{{cssxref("margin-top")}}）；或者没有设定边框、内边距、行级内容、高度（{{cssxref("height")}}）或最小高度（{{cssxref("min-height")}}）来分隔块级元素的下边距（{{cssxref("margin-bottom")}}）与其内部的一个或多个后代后代块元素的下边距（{{cssxref("margin-bottom")}}），则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。 - 空的区块 - : 如果块级元素没有设定边框、内边距、行级内容、高度（{{cssxref("height")}}）、最小高度（{{cssxref("min-height")}}）来分隔块级元素的上边距（{{cssxref("margin-top")}}）及其下边距（{{cssxref("margin-bottom")}}），则会出现其上下外边距的折叠。 diff --git a/files/zh-cn/web/guide/css/block_formatting_context/index.md b/files/zh-cn/web/css/css_display/block_formatting_context/index.md similarity index 99% rename from files/zh-cn/web/guide/css/block_formatting_context/index.md rename to files/zh-cn/web/css/css_display/block_formatting_context/index.md index 6386af98f02ee0..95b4f2bddff9b9 100644 --- a/files/zh-cn/web/guide/css/block_formatting_context/index.md +++ b/files/zh-cn/web/css/css_display/block_formatting_context/index.md @@ -1,6 +1,6 @@ --- title: 区块格式化上下文 -slug: Web/Guide/CSS/Block_formatting_context +slug: Web/CSS/CSS_display/Block_formatting_context --- {{CSSRef}} diff --git a/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md b/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md index 78be91d87afc93..6b5c679bc6c273 100644 --- a/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md +++ b/files/zh-cn/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md @@ -53,7 +53,7 @@ slug: Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow ## Summary -In this guide we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a [Block Formatting Context](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context), in [Formatting Contexts Explained](/zh-CN/docs/Web/CSS/CSS_flow_layout/Formatting_Contexts_Explained). +In this guide we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a [Block Formatting Context](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context), in [Formatting Contexts Explained](/zh-CN/docs/Web/CSS/CSS_flow_layout/Formatting_Contexts_Explained). ## See Also diff --git a/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md b/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md index 3a128c8767917b..3c2a73c003c396 100644 --- a/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md +++ b/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md @@ -71,10 +71,10 @@ box model 不完全适用于参与内联格式上下文。在水平书写模式 ## 总结 -在本指南中，我们更详细地介绍了块和内联格式上下文以及创建块格式上下文（BFC）的重要主题。在下一个指南中，我们将了解正常流如何与不同的写入模式交互 [how normal flow interacts with different writing modes](/zh-CN/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)。 +在本指南中，我们更详细地介绍了块和内联格式上下文以及创建块格式上下文（BFC）的重要主题。在下一个指南中，我们将了解[正常流如何与不同的写入模式交互](/zh-CN/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)。 -## 另请参见 +## 参见 -- [Block formatting context](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) -- [Visual Formatting Model](/zh-CN/docs/Web/CSS/Visual_formatting_model) -- [CSS Box Model](/zh-CN/docs/Web/CSS/CSS_box_model) +- [区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context) +- [视觉格式化模型](/zh-CN/docs/Web/CSS/Visual_formatting_model) +- [CSS 盒模型](/zh-CN/docs/Web/CSS/CSS_box_model) diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/index.md index dc7e1e909e1a54..02f931f2940cc7 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index {{CSSRef}} -通常情况下，[HTML](/zh-CN/docs/Glossary/HTML)页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。 {{cssxref("z-index")}}属性可让你在渲染内容时调整对象分层的顺序。 +通常情况下，[HTML](/zh-CN/docs/Glossary/HTML) 页面可以被认为是二维的，因为文本，图像和其他元素被排列在页面上而不重叠。在这种情况下，只有一个渲染进程，所有元素都知道其他元素所占用的空间。{{cssxref("z-index")}} 属性可让你在渲染内容时调整对象分层的顺序。 > _在 CSS 2.1 中，所有的盒模型元素都处于三维坐标系中。除了我们常用的横坐标和纵坐标，盒模型元素还可以沿着“z 轴”层叠摆放，当他们相互覆盖时，z 轴顺序就变得十分重要。_ @@ -17,13 +17,13 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index 本文将通过一些简单的例子来解释这些规则。 -1. [Stacking without z-index](/zh-CN/docs/Web/Guide/CSS/Understanding_z-index/Stacking_without_z-index) : 默认的摆放规则，即不含有 z-index 属性时 -2. [Stacking and float](/zh-CN/CSS/Understanding_z-index/Stacking_floating_elements) : 浮动元素的处理方式 -3. [Adding z-index](/zh-CN/CSS/Understanding_z-index/Using_z-index) : 使用 z-index 来改变堆放顺序 -4. [The stacking context](/zh-CN/CSS/Understanding_z-index/Stacking_context) : 内容堆放注意事项 -5. [Stacking context example 1](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1) : 在两层元素的第二层上使用 z-index -6. [Stacking context example 2](/zh-CN/docs/Web/Guide/CSS/Understanding_z-index/Stacking_context_example_2) : 在两层元素的所有层上使用 z-index -7. [Stacking context example 3](/zh-CN/docs/Web/Guide/CSS/Understanding_z-index/Stacking_context_example_3) : 在三层元素的第二层上使用 z-index +1. [不含 z-index 的堆叠](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index)：默认的摆放规则，即不含有 z-index 属性时 +2. [层叠与浮动](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements)：浮动元素的处理方式 +3. [添加 z-index](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index)：使用 z-index 来改变堆放顺序 +4. [层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)：内容堆放注意事项 +5. [堆叠上下文示例 1](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1)：在两层元素的第二层上使用 z-index +6. [堆叠上下文示例 2](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2)：在两层元素的所有层上使用 z-index +7. [堆叠上下文示例 3](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3)：在三层元素的第二层上使用 z-index ## 原始文档信息 diff --git a/files/zh-cn/web/css/display/index.md b/files/zh-cn/web/css/display/index.md index 61feb8b3727f91..f0a36249b453c0 100644 --- a/files/zh-cn/web/css/display/index.md +++ b/files/zh-cn/web/css/display/index.md @@ -80,10 +80,10 @@ display: unset; 如果它的外部显示类型是 `inline` 或 `run-in`，并且它参与一个块或者内联格式上下文，那么它将生成一个内联盒子。否则它将生成一个块容器盒。 - 根据其他属性的值（例如 {{CSSxRef("position")}}、{{CSSxRef("float")}} 或 {{CSSxRef("overflow")}}）以及它自身是否参与到块或者内联格式化上下文，它要么为它的内容建立新的[块级格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)（BFC），要么将其内容集成到其父元素的格式化上下文中。 + 根据其他属性的值（例如 {{CSSxRef("position")}}、{{CSSxRef("float")}} 或 {{CSSxRef("overflow")}}）以及它自身是否参与到块或者内联格式化上下文，它要么为它的内容建立新的[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)（BFC），要么将其内容集成到其父元素的格式化上下文中。 - `flow-root` - - : 该元素生成一个块级元素盒，其会建立一个新的[块级格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)，定义格式化上下文的根元素。 + - : 该元素生成一个块级元素盒，其会建立一个新的[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)，定义格式化上下文的根元素。 - `table` - : 该元素的行为类似于 HTML 中的 {{HTMLElement("table")}} 元素。它定义了一个块级别的盒子。 - `flex` diff --git a/files/zh-cn/web/css/flex-direction/index.md b/files/zh-cn/web/css/flex-direction/index.md index 86378eead6fd6e..5f35c881437bcf 100644 --- a/files/zh-cn/web/css/flex-direction/index.md +++ b/files/zh-cn/web/css/flex-direction/index.md @@ -5,24 +5,26 @@ slug: Web/CSS/flex-direction {{CSSRef}} -[CSS](/zh-CN/docs/CSS) **`flex-direction`** 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。 +[CSS](/zh-CN/docs/Web/CSS) **`flex-direction`** 属性指定了内部元素是如何在弹性容器中布局的，定义了主轴的方向（正方向或反方向）。 -``` -/* The direction text is laid out in a line */ +```css +/* 文本排成行的方向 */ flex-direction: row; -/* Like , but reversed */ +/* 类似于 ，但方向相反 */ flex-direction: row-reverse; -/* The direction in which lines of text are stacked */ +/* 文本行堆叠的方向 */ flex-direction: column; -/* Like , but reversed */ +/* 类似于 ，但方向相反 */ flex-direction: column-reverse; -/* Global values */ +/* 全局值 */ flex-direction: inherit; flex-direction: initial; +flex-direction: revert; +flex-direction: revert-layer; flex-direction: unset; ``` @@ -30,7 +32,7 @@ flex-direction: unset; {{cssinfo}} -查看 [使用 CSS 弹性盒子](/zh-CN/docs/Web/Guide/CSS/Flexible_boxes) 以了解更多的属性和信息。 +查看[使用 CSS 弹性盒子](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)以了解更多的属性和信息。 ## 语法 @@ -116,6 +118,6 @@ flex-direction: unset; {{Compat}} -## 参考 +## 参见 - [使用 CSS 弹性盒子](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Using_CSS_flexible_boxes) diff --git a/files/zh-cn/web/css/flex-flow/index.md b/files/zh-cn/web/css/flex-flow/index.md index c69c7941aac542..9472819ddabdf3 100644 --- a/files/zh-cn/web/css/flex-flow/index.md +++ b/files/zh-cn/web/css/flex-flow/index.md @@ -11,15 +11,38 @@ slug: Web/CSS/flex-flow {{cssinfo}} -更多信息参见 [使用 CSS 弹性盒](/zh-CN/docs/Web/Guide/CSS/Flexible_boxes) +更多信息参见 [使用 CSS 弹性盒](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) ## 语法 -[Formal syntax](/zh-CN/docs/CSS/Value_definition_syntax): {{csssyntax("flex-flow")}} +```css +/* flex-flow：<'flex-direction'> */ +flex-flow: row; +flex-flow: row-reverse; +flex-flow: column; +flex-flow: column-reverse; + +/* flex-flow：<'flex-wrap'> */ +flex-flow: nowrap; +flex-flow: wrap; +flex-flow: wrap-reverse; + +/* flex-flow：<'flex-direction'> 和 <'flex-wrap'> */ +flex-flow: row nowrap; +flex-flow: column wrap; +flex-flow: column-reverse wrap-reverse; + +/* 全局值 */ +flex-flow: inherit; +flex-flow: initial; +flex-flow: revert; +flex-flow: revert-layer; +flex-flow: unset; +``` ### 取值 -`更多取值信息请查看` [`flex-direction`](/zh-CN/docs/CSS/flex-direction) 和 [`flex-wrap`](/zh-CN/docs/CSS/flex-wrap) +更多取值信息请查看 [`flex-direction`](/zh-CN/docs/CSS/flex-direction) 和 [`flex-wrap`](/zh-CN/docs/CSS/flex-wrap) ## 示例 @@ -38,6 +61,6 @@ element { {{Compat}} -## 另参见 +## 参见 -- [使用 CSS 弹性盒子](/zh-CN/docs/CSS/Using_CSS_flexible_boxes) +- [使用 CSS 弹性盒子](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) diff --git a/files/zh-cn/web/css/float/index.md b/files/zh-cn/web/css/float/index.md index ee11628e14972a..73718e54279bc2 100644 --- a/files/zh-cn/web/css/float/index.md +++ b/files/zh-cn/web/css/float/index.md @@ -144,5 +144,5 @@ div { ## 参见 -- [块级格式化上下文（Block formatting context）](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) +- [区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context) - 使用 {{cssxref("clear")}} 强制元素移至浮动元素下方。 diff --git a/files/zh-cn/web/css/image/index.md b/files/zh-cn/web/css/image/index.md index c2b9432d49f9e9..def960571fcab8 100644 --- a/files/zh-cn/web/css/image/index.md +++ b/files/zh-cn/web/css/image/index.md @@ -5,9 +5,7 @@ slug: Web/CSS/image {{CSSRef}} -## 综述： - -CSS 的\数据类型描述的是 2D 图形。在 CSS 中有两种类型的图像：简单的静态图像，经常被一个在使用的 URL 引用，动态生成的图像，比如 DOM 树的部分元素样式渐变或者计算样式产生。 +CSS 的 **``** 数据类型描述的是 2D 图形。在 CSS 中有两种类型的图像：简单的静态图像，经常被一个在使用的 URL 引用，动态生成的图像，比如 DOM 树的部分元素样式渐变或者计算样式产生。 CSS 可以处理以下情形中的不同类型图像： @@ -71,7 +69,10 @@ element(#fakeid) 如果 fakeid 是一个不存在与页面 {{Compat}} -## 参阅： +## 参见 -- [Using CSS gradients](/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients), {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}} -- {{cssxref("element","element()")}} +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("element","element()")}} {{Experimental_Inline}} +- {{CSSxRef("image/image", "image()")}} +- {{CSSxRef("image/image-set","image-set()")}} +- {{CSSxRef("cross-fade","cross-fade()")}} diff --git a/files/zh-cn/web/css/index.md b/files/zh-cn/web/css/index.md index 01c56480d34e9a..ae93286faf00b0 100644 --- a/files/zh-cn/web/css/index.md +++ b/files/zh-cn/web/css/index.md @@ -56,7 +56,7 @@ CSS 是**开放 Web** 的核心语言之一，并根据 [W3C 规范](https://www - [特殊性（另译优先级）](/zh-CN/docs/Web/CSS/Specificity)、[继承](/zh-CN/docs/Web/CSS/Inheritance)和[级联](/zh-CN/docs/Web/CSS/Cascade) - [盒模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)和[外边距合并](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - [包含块](/zh-CN/docs/Web/CSS/Containing_block) - - [堆叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)和[区块格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) + - [堆叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)和[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context) - [初始值](/zh-CN/docs/Web/CSS/initial_value)、[计算值](/zh-CN/docs/Web/CSS/computed_value)、[应用值](/zh-CN/docs/Web/CSS/used_value)和[实际值](/zh-CN/docs/Web/CSS/actual_value) - [CSS 简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties) - [CSS 弹性盒子布局](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout) diff --git a/files/zh-cn/web/css/inline_formatting_context/index.md b/files/zh-cn/web/css/inline_formatting_context/index.md index 84936189c339ce..1ec6e84d852e88 100644 --- a/files/zh-cn/web/css/inline_formatting_context/index.md +++ b/files/zh-cn/web/css/inline_formatting_context/index.md @@ -14,7 +14,7 @@ slug: Web/CSS/Inline_formatting_context - 对于水平书写模式，各个框从左边开始水平地排列 - 对于垂直书写模式，各个框从顶部开始水平地排列 -在下面给出的例子中，带黑色边框的两个 ({{HTMLElement("div")}}) 元素组成了一个[块级格式化上下文（block formatting context）](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)，其中的每一个单词都参与一个行内格式化上下文中。水平书写模式下的各个框水平地排列，垂直书写模式下的各个框垂直地排列。 +在下面给出的例子中，带黑色边框的两个 ({{HTMLElement("div")}}) 元素组成了一个[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)，其中的每一个单词都参与一个行内格式化上下文中。水平书写模式下的各个框水平地排列，垂直书写模式下的各个框垂直地排列。 {{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}} @@ -48,7 +48,7 @@ Margins, borders, 以及 padding 的设置，在行的方向上是生效的。 {{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}} -## 另见 +## 参见 -- [Block formatting context](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) -- [Visual Formatting Model](/zh-CN/docs/Web/CSS/Visual_formatting_model) +- [区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context) +- [视觉格式化模型](/zh-CN/docs/Web/CSS/Visual_formatting_model) diff --git a/files/zh-cn/web/css/opacity/index.md b/files/zh-cn/web/css/opacity/index.md index e057ff0a64f644..3d62fe5c760733 100644 --- a/files/zh-cn/web/css/opacity/index.md +++ b/files/zh-cn/web/css/opacity/index.md @@ -5,13 +5,11 @@ slug: Web/CSS/opacity {{CSSRef}} -## 概述 - opacity 属性指定了一个元素的**不透明度**。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。 当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。 -使用 opacity 属性，当属性值不为 1 时，会把元素放置在一个新的[层叠上下文](/zh-CN/docs/Web/Guide/CSS/Understanding_z-index/Stacking_context)中。 +使用 opacity 属性，当属性值不为 1 时，会把元素放置在一个新的[层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)中。 {{cssinfo}} diff --git a/files/zh-cn/web/css/overflow/index.md b/files/zh-cn/web/css/overflow/index.md index f9f01094d90aec..b08b3a0f2df57a 100644 --- a/files/zh-cn/web/css/overflow/index.md +++ b/files/zh-cn/web/css/overflow/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/overflow {{CSSRef}} -**`overflow`** 是 [CSS](/zh-CN/docs/Web/CSS) 的[简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties)，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的[块级格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)时。 +**`overflow`** 是 [CSS](/zh-CN/docs/Web/CSS) 的[简写属性](/zh-CN/docs/Web/CSS/Shorthand_properties)，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)时。 {{EmbedInteractiveExample("pages/css/overflow.html")}} @@ -69,7 +69,7 @@ overflow: unset; overflow 选项包括裁减、显示滚动条，或者显示从容器流向周围区域的内容。 -指定 `visible`（默认）或 `clip` 以外的值，会创建一个新的[块级格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)。由于技术原因，这是必要的——如果浮动包含滚动元素，它将在每个滚动步骤后强制重新包装内容，从而导致一个缓慢的滚动体验。 +指定 `visible`（默认）或 `clip` 以外的值，会创建一个新的[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)。由于技术原因，这是必要的——如果浮动包含滚动元素，它将在每个滚动步骤后强制重新包装内容，从而导致一个缓慢的滚动体验。 为使 `overflow` 具有效果，块级水平的容器必须有一个设定的高度（`height` 或 `max-height`）或 `white-space` 设置为 `nowrap`。 diff --git a/files/zh-cn/web/css/reference/index.md b/files/zh-cn/web/css/reference/index.md index d5394cde25f6fa..be29688942fc7d 100644 --- a/files/zh-cn/web/css/reference/index.md +++ b/files/zh-cn/web/css/reference/index.md @@ -127,14 +127,14 @@ div.menu-bar li:hover > ul { ### 布局 -- [块级格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) +- [区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context) - [盒模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [包含块](/zh-CN/docs/Web/CSS/Containing_block) - [布局模式](/zh-CN/docs/Web/CSS/Layout_mode) - [外边距合并](/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - [替换元素](/zh-CN/docs/Web/CSS/Replaced_element) -- [层叠上下文](/zh-CN/docs/Web/Guide/CSS/Understanding_z-index/Stacking_context) -- [视觉格式化模型](/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model) +- [层叠上下文](/zh-CN/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) +- [视觉格式化模型](/zh-CN/docs/Web/CSS/Visual_formatting_model) ## DOM-CSS / CSSOM diff --git a/files/zh-cn/web/css/visual_formatting_model/index.md b/files/zh-cn/web/css/visual_formatting_model/index.md index 476a24afffd450..882ebe75bce65a 100644 --- a/files/zh-cn/web/css/visual_formatting_model/index.md +++ b/files/zh-cn/web/css/visual_formatting_model/index.md @@ -5,9 +5,9 @@ slug: Web/CSS/Visual_formatting_model {{CSSRef}} -CSS 视觉格式化模型（*visual formatting model）*是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。 +CSS **视觉格式化模型**（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。 -视觉格式化模型会根据[CSS 盒子模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定： +视觉格式化模型会根据 [CSS 盒子模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定： - 盒子的尺寸：精确指定、由约束条件指定或没有指定 - 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block） diff --git a/files/zh-cn/web/html/element/fieldset/index.md b/files/zh-cn/web/html/element/fieldset/index.md index 594544e2689350..3ba4655791a115 100644 --- a/files/zh-cn/web/html/element/fieldset/index.md +++ b/files/zh-cn/web/html/element/fieldset/index.md @@ -29,7 +29,7 @@ slug: Web/HTML/Element/fieldset `
` 有几种特别的样式方案。 -它的 {{cssxref("display")}} 值默认为 `block`，因此建立了一个[块级格式化上下文](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)。如果将 `
` 的 `display` 值设置为行内级别，则会表现为 `inline-block`，否则会表现为 `block`。默认情况下 `
` 会有 `2px` `groove` 的边界围绕着内容，还有一个默认的小的内边距，还有 {{cssxref("min-inline-size", "min-inline-size: min-content")}} 。 +它的 {{cssxref("display")}} 值默认为 `block`，因此建立了一个[区块格式化上下文](/zh-CN/docs/Web/CSS/CSS_display/Block_formatting_context)。如果将 `
` 的 `display` 值设置为行内级别，则会表现为 `inline-block`，否则会表现为 `block`。默认情况下 `
` 会有 `2px` `groove` 的边界围绕着内容，还有一个默认的小的内边距，还有 {{cssxref("min-inline-size", "min-inline-size: min-content")}} 。 如果其中有 {{htmlelement("legend")}} 元素，会放在块级框起始处的边界上。`` 的宽度会根据内容尽量收缩（shrink-wrap），同时也建立了一个格式化上下文。`display` 值会块级化（例如 `display: inline` 表现为 `block`）。 diff --git a/files/zh-cn/web/html/element/li/index.md b/files/zh-cn/web/html/element/li/index.md index a8244d18a976d6..1ca2f06c6cecc2 100644 --- a/files/zh-cn/web/html/element/li/index.md +++ b/files/zh-cn/web/html/element/li/index.md @@ -5,7 +5,7 @@ slug: Web/HTML/Element/li {{HTMLSidebar}} -**HTML `
  • ` 元素** （或称 _HTML 列表条目元素）_ 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 ({{HTMLElement("ol")}})，一个无序列表 ({{HTMLElement("ul")}})，或者一个菜单 ({{HTMLElement("menu")}})。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。 +**HTML `
  • ` 元素** （或称 _HTML 列表条目元素_）用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表（{{HTMLElement("ol")}}）、一个无序列表（{{HTMLElement("ul")}}），或者一个菜单（{{HTMLElement("menu")}}）。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。 @@ -98,11 +98,11 @@ slug: Web/HTML/Element/li {{Compat}} -## 另见 +## 参见 -- 其他列表相关的 HTML 元素： {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, 和过时的 {{HTMLElement("dir")}}； +- 其他列表相关的 HTML 元素： {{HTMLElement("ul")}}、{{HTMLElement("li")}}、{{HTMLElement("menu")}} 和过时的 {{HTMLElement("dir")}}； - 可能特定用于排版 `
  • ` 元素的 CSS 属性： - {{cssxref("list-style")}} 属性，用于选择序号的展示方式， - - [CSS 计数器](/zh-CN/docs/Web/Guide/CSS/Counters)，用于处理复杂的嵌套列表， + - [CSS 计数器](/zh-CN/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)，用于处理复杂的嵌套列表， - {{cssxref("margin")}} 属性，用于控制列表条目的缩进。 diff --git a/files/zh-cn/web/html/element/link/index.md b/files/zh-cn/web/html/element/link/index.md index 90220d8ce285f8..586d47d28ccf6c 100644 --- a/files/zh-cn/web/html/element/link/index.md +++ b/files/zh-cn/web/html/element/link/index.md @@ -110,13 +110,13 @@ slug: Web/HTML/Element/link - `integrity` {{experimental_inline}} - : 包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以 base64 编码的方式加的密，这样用户能用它来验证一个获取到的资源，在传送时未被非法篡改，详情查看[Subresource Integrity](/zh-CN/docs/Web/Security/Subresource_Integrity)。 - `media` - - : 这个属性规定了外部资源适用的媒体类型。它的值必须是"[媒体查询](/zh-CN/docs/Web/Guide/CSS/Media_queries)"。这个属性使得用户代理能选择最适合设备运行的媒体类型。 - - 在 HTML 4 中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如"[媒体类型](/zh-CN/docs/Web/CSS/@media)"规定了该元素可取的属性，如 print、screen、aural、braille。HTML5 将该属性值扩展为任意类型的"[媒体查询](/zh-CN/docs/CSS/Media_queries)"，"媒体查询"将 HTML4 的属性值都包括在内。 - - 不支持"[CSS3 媒体查询](/zh-CN/docs/CSS/Media_queries)"的浏览器并不会强行识别这些链接，因此别忘了设置备用 link，即那些可用于 HTML4 的 link。 + - : 这个属性规定了外部资源适用的媒体类型。它的值必须是“[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)”。这个属性使得用户代理能选择最适合设备运行的媒体类型。 + - 在 HTML 4 中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如“[媒体类型](/zh-CN/docs/Web/CSS/@media)”规定了该元素可取的属性，如 print、screen、aural、braille。HTML5 将该属性值扩展为任意类型的“[媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)”，“媒体查询”将 HTML4 的属性值都包括在内。 + - 不支持“[CSS3 媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)”的浏览器并不会强行识别这些链接，因此别忘了设置备用 link，即那些可用于 HTML4 的 link。 - `referrerpolicy` {{experimental_inline}} - : 一个字符串，指示在获取资源时使用哪个引荐来源网址： - - `'no-referrer'` 表示{{HTTPHeader("Referer")}} 标头将不会发送。 - - `'no-referrer-when-downgrade'` 的原始位置时不会发送任何{{HTTPHeader("Referer")}}标头。如果未指定其他政策，这是用户代理的默认行为。 + - `'no-referrer'` 表示 {{HTTPHeader("Referer")}} 标头将不会发送。 + - `'no-referrer-when-downgrade'` 的原始位置时不会发送任何 {{HTTPHeader("Referer")}} 标头。如果未指定其他政策，这是用户代理的默认行为。 - `'origin'` 意味着引荐来源网址将是页面的来源，大致是方案，主机和端口。 - `'origin-when-cross-origin'` 这意味着导航到其他来源将仅限于方案，主机和端口，而在同一来源上导航将包括引荐来源网址的路径。 - `'unsafe-url'` 意味着引荐来源网址将包含来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可能会将来源和路径从受 TLS 保护的资源泄漏到不安全的来源。 diff --git a/files/zh-cn/web/html/element/style/index.md b/files/zh-cn/web/html/element/style/index.md index 0cc3bd55f63d6f..ede79c5aadf652 100644 --- a/files/zh-cn/web/html/element/style/index.md +++ b/files/zh-cn/web/html/element/style/index.md @@ -25,7 +25,7 @@ slug: Web/HTML/Element/style - `type` - : 该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 `text/css`。 - `media` - - : 该属性规定该样式适用于哪个媒体。属性的取值[CSS 媒体查询](/zh-CN/docs/Web/Guide/CSS/Media_queries)，默认值为 `all`。 + - : 该属性规定该样式适用于哪个媒体。属性的取值 [CSS 媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)，默认值为 `all`。 - `nonce` - : 一种加密的随机数（一次使用的数字），用于在[style-src Content-Security-Policy](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/style-src)中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。 - `title`