From b9afb23d12dcae1e09f8d04c72143c5ddaa34aea Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 16 Jul 2021 16:27:00 -0400 Subject: delete conflicting/orphaned docs (zh-CN) (#1412) * delete conflicting docs (zh-CN) * and redirects * do orphaned as well * fix * remove more orphans * revert orphaned docs that can identify origin * move orphaned docs to current loc * adjust slug path * fix redirect change from rebase Co-authored-by: Irvin --- .../zh-cn/conflicting/web/css/@viewport/index.html | 81 ---- .../index.html | 111 ------ .../index.html | 66 ---- .../index.html | 134 ------- .../index.html | 70 ---- .../zh-cn/conflicting/web/css/_colon_is/index.html | 191 ---------- .../web/css/_colon_placeholder-shown/index.html | 68 ---- .../web/css/_doublecolon_placeholder/index.html | 100 ----- .../web/css/css_backgrounds_and_borders/index.html | 156 -------- .../resizing_background_images/index.html | 115 ------ .../using_multiple_backgrounds/index.html | 61 --- .../zh-cn/conflicting/web/css/css_color/index.html | 121 ------ .../backwards_compatibility_of_flexbox/index.html | 409 --------------------- .../basic_concepts_of_flexbox/index.html | 409 --------------------- .../typical_use_cases_of_flexbox/index.html | 188 ---------- .../conflicting/web/css/easing-function/index.html | 267 -------------- 16 files changed, 2547 deletions(-) delete mode 100644 files/zh-cn/conflicting/web/css/@viewport/index.html delete mode 100644 files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html delete mode 100644 files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html delete mode 100644 files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html delete mode 100644 files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html delete mode 100644 files/zh-cn/conflicting/web/css/_colon_is/index.html delete mode 100644 files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html delete mode 100644 files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html delete mode 100644 files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html delete mode 100644 files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html delete mode 100644 files/zh-cn/conflicting/web/css/css_color/index.html delete mode 100644 files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html delete mode 100644 files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html delete mode 100644 files/zh-cn/conflicting/web/css/easing-function/index.html (limited to 'files/zh-cn/conflicting/web/css') diff --git a/files/zh-cn/conflicting/web/css/@viewport/index.html b/files/zh-cn/conflicting/web/css/@viewport/index.html deleted file mode 100644 index c4cf323178..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: height -slug: conflicting/Web/CSS/@viewport -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height -original_slug: Web/CSS/@viewport/height ---- -
{{CSSRef}}
- -
height CSS 属性是同时设置可视区 {{cssxref("@viewport/min-height", "min-height")}} and {{cssxref("@viewport/max-height", "max-height")}} 的简写。当你设置一个值的时候，最小高度（minimum height）和最大高度（maximum height）会被同时设置。
- -

如果提供两个值，第一个值会被设置为最小高度，第二个值将会被设置为最大高度。

- -

语法

- -
/* One value */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* Two values */
-height: 320px 200px;
-
- -

合法值

- -
-
auto
-
真实生效的高度值将根据其他 CSS 属性计算得出。
-
<length>
-
一个非负的绝对或相对值。
-
<percentage>
-
一个相对于缩放因子是 1.0 的初始可视区宽高的百分比值，水平和垂直方向的长度分别计算。不能是负值。
-
- -

正式定义

- -

{{cssinfo}}

- -

正式语法

- -{{csssyntax}} - -

示例

- -

设置最小和最大高度

- -
@viewport {
-  height: 500px;
-}
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}初始定义
- -

浏览器兼容性

- - - -

{{Compat("css.at-rules.viewport.height")}}

- -

同时查看

- - diff --git a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html deleted file mode 100644 index f7fd64d116..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: orientation -slug: conflicting/Web/CSS/@viewport_7861ca3461a359b150d44f2c8d74e53a -tags: - - CSS - - CSS Description -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/orientation -original_slug: Web/CSS/@viewport/orientation ---- -
{{CSSRef}}
- -

摘要

- -

此 orientation CSS 描述符控制由{{cssxref("@viewport")}}定义文档的方向。

- -

通过设备的倾斜摆动情况来决定文档显示的方向，作者可以通过设置这个描述符来抑制方向的变化{{cssinfo}}

- -

语法

- -
/* Keyword values */
-orientation: auto;
-orientation: portrait;/*锁定为纵向*/
-orientation: landscape;/* 锁定为横向*/
-
- -

取值

- -
-
auto
-
用户代理将文档的方向设置为自动，通常基于设备的定位由加速度传感器 （如果设备具有这种硬件传感器），但是用户控制，OS 级别的"锁方向"往往会优先于加速度传感器的设置。
-
portrait
-
文档被锁定为纵向。
-
landscape
-
文档被锁定为横向。
-
- -

标准语法

- -{{csssyntax}} - -

规范

- - - - - - - - - - - - - - - - -
规范标准注释
{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}{{Spec2('CSS3 Device')}}Initial definition
- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}10 {{property_prefix("-ms")}}{{CompatNo}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}8 {{property_prefix("-o")}}{{CompatUnknown}}
-
diff --git a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html deleted file mode 100644 index a68fbedc8d..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: viewport-fit -slug: conflicting/Web/CSS/@viewport_a33ee59ffd8336ffb3336900dea02e9f -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit -original_slug: Web/CSS/@viewport/viewport-fit ---- -
{{CSSRef}} {{Draft}} {{SeeCompatTable}}
- -

viewport-fit CSS {{CSSxRef("@viewport")}}  {{Glossary("Descriptor (CSS)", "descriptor")}} 是为了控制文档是如何填充满屏幕的。

- -

语法

- -
/* 关键值*/
-viewport-fit: auto;
-viewport-fit: contain;
-viewport-fit: cover;
-
- -

属性值

- -
-
auto
-
此值不影响初始布局视图端口，并且整个web页面都是可查看的。
-
contain
-
视图端口按比例缩放，以适合显示内嵌的最大矩形。
-
cover
-
视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。
-
- -

形式语法

- -
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- -

注意

- -

在使用 viewport-fit 描述符时，必须记住并不是所有的设备显示都是矩形的，因此应该使用safe area inset 变量。

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Initial definition.
- -

浏览器兼容性

- -

{{Compat("css.at-rules.viewport.viewport-fit")}}

- -

另请参见

- - diff --git a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html deleted file mode 100644 index 709a42b3d1..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: width -slug: conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width -original_slug: Web/CSS/@viewport/width ---- -
{{CSSRef}}
- -

The width CSS descriptor is shorthand for setting both the min-width and the max-width descriptors of the viewport. By providing one viewport length value, that value will determine both the min-width and the max-width to the value provided.

- -

If two viewport values are provided the first value will be set to the min-width and the second value will be set max-width.

- -

Syntax

- -
/* An example with one viewport value: */
-@viewport {
-    width: 320px;
-}
-
-/* An example with two viewport values: */
-@viewport {
-    width: 320px, 120px;
-}
-
-
- - - -

Values

- -
-
auto
-
The used value is calculated from the other CSS descriptors' values.
-
<length>
-
A non-negative absolute or relative length.
-
<percentage>
-
A percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.
-
- -

Formal syntax

- -
auto | <length> | <percentage>
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Initial definition
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag){{CompatNo}}10 {{property_prefix("-ms")}}11.10
- Removed in 15
- Reintroduced behind a flag in 16		{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support - - - - - - -
4.4
- 		- - - - - - -
29
- 		{{CompatNo}}10{{property_prefix("-ms")}}11.10
- Removed in 15
- Reintroduced behind a flag in 16		{{CompatNo}}
-
diff --git a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html deleted file mode 100644 index 3ba2f5579c..0000000000 --- a/files/zh-cn/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: zoom -slug: conflicting/Web/CSS/@viewport_e065ce90bde08c9679692adbe64f6518 -tags: - - CSS - - CSS Descriptor -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom -original_slug: Web/CSS/@viewport/zoom ---- -
{{ CSSRef }}
- -

zoom CSS 属性会根据 {{cssxref("@viewport")}} 来初始化一个缩放因数。

- -

当设置1.0 或 100%时表示不缩放。更大的值放大，更小的值缩小。

- -

{{cssinfo}}

- -

语法

- -
/* Keyword value */
-zoom: auto;
-
-/* <number> values */
-zoom: 0.8;
-zoom: 2.0;
-
-/* <percentage> values */
-zoom: 150%;
-
- -

值

- -
-
auto
-
根据`viewport`来既定当前标签的缩放。
-
<number>
-
必须是一个非负数。1表示没有缩放，大于1表示放大的倍数，小于1亦然。
-
<percentage>
-
必须是一个非负的百分比。以100%为基础进行缩放。
-
- -

形式语法

- -{{csssyntax}} - -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}Initial specification
- -

浏览器兼容

- - - -

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/zh-cn/conflicting/web/css/_colon_is/index.html b/files/zh-cn/conflicting/web/css/_colon_is/index.html deleted file mode 100644 index 5ffedac0bc..0000000000 --- a/files/zh-cn/conflicting/web/css/_colon_is/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: ':any' -slug: conflicting/Web/CSS/:is -tags: - - CSS - - 伪类选择器 - - 实验性 -translation_of: Web/CSS/:is -translation_of_original: Web/CSS/:any -original_slug: Web/CSS/:any ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

概要

- -

The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

- -

译文：any()伪类可以让您快速构建类似的选择器集合，通过建立包含所有包含项的组来匹配。这是另一种选择，它必须重复整个选择器，因为其中一个项目是不同的。

- -
Note : This pseudo-class is in progress to be standardized in CSS Selectors Level 4 under the name :matches(). It is likely that the syntax and name of :-vendor-any() will be changed to reflect it in the near future.
- -
注意:这个伪类正在CSS选择器第4级按照名称:matches()进行标准化。很可能的语法和名称:- vendor-any()将在不久的将来被更改以反映它。
- -

语法

- -{{csssyntax}} - -

值

- -
-
selector
-
选择器。这可以是由 CSS 3 简单选择器 组成的简单选择器或多重选择器，并且可以包含后代组合器。
-
- -
注意：选择器可以不包含伪元素，并且仅允许的组合器是后代组合器。
- -

例子

- -

举个例子，如以下 CSS：

- -
/* 3 deep (or more) unordered lists use a square */
-ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
-ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
-ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
-ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
-ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
-ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
-menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
-dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
-dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
-dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
-  list-style-type: square;
-}
-
- -

可以写成这样：

- -
/* 3 deep (or more) unordered lists use a square */
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
-  list-style-type: square;
-}
- -

但是，不能写成这样（详见the section on performance）：

- -
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}
- -

Notes

- -

译文： 这个伪类选择器会在处理 HTML5 的 sections and headings 中尤其有用。因为 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, 和 {{HTMLElement("nav")}} 可以被嵌套，如果不使用  :any() ，为了去匹配这些标签来给予样式会变得困难。

- -

举个例子，当不使用 :any() ，给予不同的 DOM  结点层次深度下的所有的 {{HTMLElement("h1")}}  的元素样式时，将会变得特别的复杂。

- -
/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1, {
-  font-size: 20px;
-}
-/* Level 3 */
-/* ... don't even think about it*/
-
- -

然而，通过使用  :any() ，这将变得很简单：

- -
/* Level 0 */
-h1 {
-  font-size: 30px;
-}
-/* Level 1 */
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-/* Level 2 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-/* Level 3 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
- -

性能与特异性问题

- -

Bug 561154 追踪了一个关于 Gecko 作为内核的浏览器在使用 :-moz-any() 不正确的问题。在最新的浏览器(从 Firefox 12) 实现 :-moz-any() 有一个通用的规则，在使用这个伪类选择器时，当使用它作为最右边的选择器会比使用 ID, Class, 标签选择器作为最右边的选择器要来的慢。

- -

例如:

- -
.a > :-moz-any(.b, .c)
-
- -

会比下面的表达式慢

- -
.a > .b, .a > .c
-
- -

而下面的表达式将会是最快的

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
diff --git a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html deleted file mode 100644 index af8a706fa9..0000000000 --- a/files/zh-cn/conflicting/web/css/_colon_placeholder-shown/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: conflicting/Web/CSS/:placeholder-shown -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: Web/CSS/:placeholder-shown -translation_of_original: Web/CSS/:-moz-placeholder -original_slug: Web/CSS/:-moz-placeholder ---- -

 

- -
提示: 在Firefox 19+版本中 :-moz-placeholder 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.
- -
Note: The CSSWG have decided to introduce :placeholder-shown. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}
- -

{{ CSSRef() }}{{Non-standard_header}}{{ gecko_minversion_header("2.0") }}

- -

摘要

- -

 :-moz-placeholder伪类控制元素所显示的文字占位符文字占位符. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.

- -

示例

- -

这个示例将文字占位符改变为了绿色.

- -
<!doctype html>
-<html>
-<head>
-  <title>Placeholder demo</title>
-  <style type="text/css">
-    input:-moz-placeholder {
-      color: green;
-    }
-  </style>
-</head>
-<body>
-  <input id="test" placeholder="Placeholder text!">
-</body>
-</html>
-
- -

查看这个示例.

- -

溢出

- -

在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS text-overflow: ellipsis; 来省略一中间部分文字.

- -
input[placeholder] { text-overflow: ellipsis; }
-::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
-input:-moz-placeholder { text-overflow: ellipsis; }
-
- -

It was David Walsh, the man on fire who introduced this to a lot of designers. Placeholders and Overflow.

- -

Bugzilla

- -

{{ Bug(457801) }}

- -

See also

- - diff --git a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html b/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html deleted file mode 100644 index b66dc3a6ef..0000000000 --- a/files/zh-cn/conflicting/web/css/_doublecolon_placeholder/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: conflicting/Web/CSS/::placeholder -tags: - - CSS - - CSS Pseudo-class - - CSS Reference - - Non-standard -translation_of: Web/CSS/::placeholder -translation_of_original: Web/CSS/::-moz-placeholder -original_slug: Web/CSS/::-moz-placeholder ---- -
{{Non-standard_header}}{{CSSRef}}
- -
提示: {{cssxref('::-moz-placeholder')}} 伪元素在Firefox 19+替代了之前的 :-moz-placeholder 伪类.
- -
{{gecko_minversion_header("19.0")}}
- -

摘要

- -

 ::-moz-placeholder 伪元素控制元素所显示的文字占位符.它允许开发者/设计师改变文字占位符的样式.默认的文字占位符为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.

- -

示例

- -

HTML 内容

- -
<input id="test" placeholder="Placeholder text!">
- -

CSS 内容

- -
input::-moz-placeholder {
-  color: green;
-}
- -

{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B', '100%', 100)}}

- -

 

- -

浏览器兼容性

- -

{{CompatibilityTable}}

- - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
- - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
- -

[1] Firefox 对placeholder文本默认应用{{cssxref("opacity")}}:0.54。详见{{Bug("556145")}}。大多数主流浏览器目前不会对placeholder文本伪元素或者伪类应用默认样式。

- -

Gecko 此前将本属性视为 {{cssxref(":-moz-placeholder")}}。详见 {{Bug("737786")}}.

- -

See also

- - diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html deleted file mode 100644 index 8fe764c269..0000000000 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: CSS Background and Borders -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders -original_slug: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS 背景与边框 是 CSS中描述元素背景与边框的组件。边框的实现方式包含直线、图片。盒模型可以具有单个或多个背景、圆角以及阴影。

- -

参考

- -

CSS 属性

- -
-
    -
  • {{cssxref("background")}}
    • -
  • {{cssxref("background-attachment")}}
    • -
  • {{cssxref("background-clip")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("background-origin")}}
    • -
  • {{cssxref("background-position")}}
    • -
  • {{cssxref("background-repeat")}}
    • -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("border-bottom-color")}}
    • -
  • {{cssxref("border-bottom-left-radius")}}
    • -
  • {{cssxref("border-bottom-right-radius")}}
    • -
  • {{cssxref("border-bottom-style")}}
    • -
  • {{cssxref("border-bottom-width")}}
    • -
  • {{cssxref("border-collapse")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("border-image")}}
    • -
  • {{cssxref("border-image-outset")}}
    • -
  • {{cssxref("border-image-repeat")}}
    • -
  • {{cssxref("border-image-slice")}}
    • -
  • {{cssxref("border-image-source")}}
    • -
  • {{cssxref("border-image-width")}}
    • -
  • {{cssxref("border-left")}}
    • -
  • {{cssxref("border-left-color")}}
    • -
  • {{cssxref("border-left-style")}}
    • -
  • {{cssxref("border-left-width")}}
    • -
  • {{cssxref("border-radius")}}
    • -
  • {{cssxref("border-right")}}
    • -
  • {{cssxref("border-right-color")}}
    • -
  • {{cssxref("border-right-style")}}
    • -
  • {{cssxref("border-right-width")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • {{cssxref("border-top")}}
    • -
  • {{cssxref("border-top-color")}}
    • -
  • {{cssxref("border-top-left-radius")}}
    • -
  • {{cssxref("border-top-right-radius")}}
    • -
  • {{cssxref("border-top-style")}}
    • -
  • {{cssxref("border-top-width")}}
    • -
  • {{cssxref("border-width")}}
    • -
-
- -

导航

- -
-
应用CSS多重背景
-
阐述设置元素背景方法以及背景、元素之间的交互方式
-
缩放背景图片
-
阐述如何通过拉伸、重复使背景图片覆盖或不全部覆盖元素的背景区域，更改背景图片的呈现方式。
-
- -

规范

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

浏览器支持

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html deleted file mode 100644 index 8d64addd68..0000000000 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 缩放背景图像 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -tags: - - Advanced - - CSS - - CSS Background - - Graphics - - Guide - - Web - - 背景图片 -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images -translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images -original_slug: Web/Guide/CSS/Scaling_background_images ---- -
{{cssref}}
- -

CSS 的  {{ cssxref("background-size") }} 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。

- -

拼一张大图

- -

来考虑一张大图，一个1233*1233像素的火狐图标。我们想将这张图的四个副本拼到一个300*300像素的正方形里（出于某种原因，很可能是某个非常糟糕的网站设计），最终的效果如下：

- -

screenshot1.png

- -

用下面的 CSS 可以实现这种效果：

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(fxlogo.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-} 
- -
没必要再用带前缀的 background-size 了，尽管你可能考虑到要兼容一些非常老的浏览器版本，而用带前缀的写法。
- -

拉伸图片

- -

你可以同时指定图片纵向和横向的大小，如下：

- -
background-size: 300px 150px;
-
- -

结果会是这样的：
- screenshot3.png

- -

放大图片

- -

另一方面，你可以在背景里放大一张图片。我们把 16*16px 的图标放大到 300*300px：

- -

screenshot2.png

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

正如你所看到的，CSS 的写法实际上是基本相同的。

- -

特殊值:  "contain" 和 "cover"

- -

除了{{cssxref("<length>")}} 值外，{{ cssxref("background-size") }} 还提供了另外两个特殊的尺寸值：contain 和 cover。

- -

contain

- -

contain 值指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。在支持背景图缩放的浏览器（比如Firefox 3.6+）中，改变这个窗口的大小，来看看下方这个例子。

- -
<div class="bgSizeContain">
-  <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

{{ EmbedLiveSample("contain", "100%", "220") }}

- -

cover

- -

cover 属性指定背景图可以被调整到任意大小，以使背景图完全覆盖背景区域。

- -
<div class="bgSizeCover">
-  <p>Try resizing this window.Right-click->This Frame->Open Frame in New Tab</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url('/files/2917/fxlogo.png');
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000;
-  text-shadow: 1px 1px 0 #fff;
-}
- -

{{ EmbedLiveSample("cover", "100%", "220") }}

- -

另请参阅

- - diff --git a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html deleted file mode 100644 index b1d5ee045e..0000000000 --- a/files/zh-cn/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 使用CSS的多背景 -slug: conflicting/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

通过使用 CSS3，你可以向元素应用多个背景。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。

- -

指定多个背景很简单：

- -
.myclass {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

你既可以使用简写属性 {{ cssxref("background") }} 来设置多个背景，也可以使用除 {{ cssxref("background-color") }} 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： {{ cssxref("background") }}，{{ cssxref("background-attachment") }}，{{ cssxref("background-clip") }}, {{ cssxref("background-image") }}，{{ cssxref("background-origin") }}，{{ cssxref("background-position") }}， {{ cssxref("background-repeat") }}， {{ cssxref("background-size") }}。

- -

示例

- -

该例中，三个背景进行堆叠：火狐标志,一个线性渐变， 和一张带有花的图片：

- -
.multi_bg_example {
-  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
-        linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
-        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
-  background-repeat: no-repeat, no-repeat, repeat;
-  background-position: bottom right, left, right;
-}
-
- - - - - - - - - - -
结果
css_multibg.png
- -

如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个（最前面）的背景，依次可推。

- -

其它

- - - -
 
- -
 
diff --git a/files/zh-cn/conflicting/web/css/css_color/index.html b/files/zh-cn/conflicting/web/css/css_color/index.html deleted file mode 100644 index 65153a61df..0000000000 --- a/files/zh-cn/conflicting/web/css/css_color/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: CSS Colors -slug: conflicting/Web/CSS/CSS_Color -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors -original_slug: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

CSS Colors 是 CSS 的一个模块，用于处理颜色、颜色类型和透明度。

- -

参考 (Reference)

- -

属性

- -
-
    -
  • {{cssxref("color")}}
    • -
  • {{cssxref("opacity")}}
    • -
-
- -

CSS 数据类型

- -

{{cssxref("<color>")}}

- -

指南 (Guides)

- -

None.

- -

规范 (Specifications)

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

浏览器兼容性 (Browser compatibility)

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

另请阅读

- - diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html deleted file mode 100644 index 64120aad99..0000000000 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: 使用弹性盒子进行高级布局 -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox -tags: - - CSS3布局模型 - - Flexible_Box - - Flexible_Box_Layout - - Layout - - 弹性盒子 - - 弹性盒子模型 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -

使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。

- -

浮动布局的问题

- - - -

弹性盒子如何处理

- - - -

弹性盒子属性

- -

placeholder

- - - -

弹性容器属性

- - - -

弹性元素属性

- - - -

弹性盒子混合

- -

对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：http://caniuse.com/flexbox

- -

将会使用：

- - - -

启发于：

- - - -

可以从这些地方获取帮助：

- - - -

弹性容器

- -

“flex”值会引起一个元素生成一个盒级的弹性盒子。

- -

“inline-flex”会生成一个行内弹性盒子。

- -

display: flex | inline-flex http://w3.org/tr/css3-flexbox/#flex-containers

- -
-
@mixin flexbox {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-// 使用这样的混合模式
-%flexbox { @include flexbox; }
-
- -
-
@mixin inline-flex {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -moz-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }
-
- -

弹性盒子方向

- -

“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。

- -

值：row | row-reverse | column | column-reverse

- -

http://w3.org/tr/css3-flexbox/#flex-direction-property

- -
-
@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -moz-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-// 简短版本：
-@mixin flex-dir($args...) { @include flex-direction($args...); }
-
- -

弹性盒子换行

- -

“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。

- -

值：nowrap | wrap | wrap-reverse

- -

默认：nowrap

- -

http://w3.org/tr/css3-flexbox/#flex-wrap-property

- -
-
@mixin flex-wrap($value: nowrap) {
-  // No Webkit Box fallback.
-  -webkit-flex-wrap: $value;
-  -moz-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}
-
- -

弹性盒子流（简写）

- -

“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。

- -

默认值：row nowrap

- -

http://w3.org/tr/css3-flexbox/#flex-flow-property

- -
-
@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit Box fallback.
-  -webkit-flex-flow: $values;
-  -moz-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}
-
- -

弹性盒子顺序

- -

“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。

- -

默认值：0

- -

http://w3.org/tr/css3-flexbox/#order-property

- -
-
@mixin order($int: 0) {
-  -webkit-box-ordinal-group: $int + 1;
-  -webkit-order: $int;
-  -moz-order: $int;
-  -ms-flex-order: $int;
-  order: $int;
-}
-
- -

弹性盒子增长

- -

“flex-grow”属性设置增长因数，不接受负值。

- -

默认值：0

- -

http://w3.org/tr/css3-flexbox/#flex-grow-property

- -
-
@mixin flex-grow($int: 0) {
-  -webkit-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -moz-flex-grow: $int;
-  -ms-flex-positive: $int;
-  flex-grow: $int;
-}
-
- -

弹性盒子收缩

- -

“flex-shrink”属性设置了收缩因数，不接受负值。

- -

默认值：1

- -

http://w3.org/tr/css3-flexbox/#flex-shrink-property

- -
-
@mixin flex-shrink($int: 1) {
-  -webkit-flex-shrink: $int;
-  -moz-flex-shrink: $int;
-  -ms-flex-negative: $int;
-  flex-shrink: $int;
-}
-
- -

弹性盒子伸缩

- -

“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。

- -

值：类似“width”，默认值：auto

- -

http://www.w3.org/TR/css3-flexbox/#flex-basis-property

- -
-
@mixin flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  -moz-flex-basis: $value;
-  -ms-flex-preferred-size: $value;
-  flex-basis: $value;
-}
-
- -

弹性盒子“Flex”属性（简写）

- -

“flex”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“flex”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。

- -

值：none | ||

- -

默认值：见独立属性（1 1 0）

- -

http://w3.org/tr/css3-flexbox/#flex-property

- -
-
@mixin flex($fg: 1, $fs: null, $fb: null) {
-
-  // Set a variable to be used by box-flex properties
-  $fg-boxflex: $fg;
-
-  // Box-Flex only supports a flex-grow value so lets grab the
-  // first item in the list and just return that.
-  @if type-of($fg) == 'list' {
-    $fg-boxflex: nth($fg, 1);
-  }
-
-  -webkit-box-flex: $fg-boxflex;
-  -webkit-flex: $fg $fs $fb;
-  -moz-box-flex: $fg-boxflex;
-  -moz-flex: $fg $fs $fb;
-  -ms-flex: $fg $fs $fb;
-  flex: $fg $fs $fb;
-}
-
- -

弹性盒子对齐方式

- -

“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。

- -

提示：以前版本的语法不支持“space-*”值。

- -

值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start

- -

http://w3.org/tr/css3-flexbox/#justify-content-property

- -
-
@mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  -moz-justify-content: $value;
-  justify-content: $value;
-}
-  // Shorter version:
-  @mixin flex-just($args...) { @include justify-content($args...); }
-
- -

弹性元素对齐

- -

可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）

- -

值：flex-start | flex-end | center | baseline | stretch 默认值：stretch

- -

http://w3.org/tr/css3-flexbox/#align-items-property

- -
-
@mixin align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  -moz-align-items: $value;
-  align-items: $value;
-}
-
- -

弹性元素自对齐

- -

用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。

- -

值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto

- -
-
@mixin align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  -moz-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}
-
- -

弹性元素内容对齐

- -

“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。

- -

值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch

- -

http://w3.org/tr/css3-flexbox/#align-content-property

- -
-
@mixin align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  -moz-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}
-
diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index 5a26114225..0000000000 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: 使用 CSS 弹性盒子 -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -tags: - - CSS - - CSS Flexible Boxes - - Flex - - Web - - flexbox - - 弹性 - - 弹性容器 - - 弹性盒子 - - 弹性项目 - - 指南 - - 盒子模型 - - 范例 - - 进阶 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -
{{CSSRef}}
- -

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

- -

许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。

- -
注意： 虽然 CSS 弹性盒子布局规范 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见最新编辑草案），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的兼容性表格获取。
- -

弹性盒布局概念

- -

在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

- -

块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。

- -

弹性盒布局相关词汇

- -

关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

- -

弹性布局相关名词

- -
-
弹性容器(Flex container)
-
包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 flex 或 inline-flex 来定义弹性容器。
-
弹性项目(Flex item)
-
-

弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

-
-
轴(Axis)
-
-

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

- -
    -
  • flex-direction 确立主轴。
    • -
  • justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
    • -
  • align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
    • -
  • align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。
    • -
-
-
方向(Direction)
-
-

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

- -
    -
  • order 属性将元素与序号关联起来，以此决定哪些元素先出现。
    • -
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。
    • -
-
-
行(Line)
-
-

根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

-
-
尺寸(Dimension)
-
-

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。

- - -
-
- -

定义一个弹性盒子

- -

为要使用此样式的元素指派 CSS，需按以下方式设置 display 属性：

- -
display : flex
- -

或者

- -
display : inline-flex
- -

这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。

- -
注意：厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。
- -

弹性项目须知

- -

弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 display: none。

- -

对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。

- -

相邻的弹性元素其外边距不会互相合并。使用 auto 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 Aligning with 'auto' margins。

- -

不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 align- 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 justify- 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 justify-content，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 justify-content 属性了。

- -

再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。

- -

弹性盒子相关属性

- -

不影响弹性盒子的属性

- -

由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：

- - - -

示例

- -

基本的弹性布局示例

- -

这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-   .flex
-   {
-      /* 基本样式 */
-      width: 350px;
-      height: 200px;
-      border: 1px solid #555;
-      font: 14px Arial;
-
-      /*  建立弹性框 */
-      display: -webkit-flex;
-      -webkit-flex-direction: row;
-
-      display: flex;
-      flex-direction: row;
-   }
-
-   .flex > div
-   {
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-
-      width: 30px; /* 让过渡表现良好。（从/到"width:auto"的过渡
-                      至少在 Gecko 和 Webkit 上是有 bug 的。
-                      更多信息参见 http://bugzil.la/731886 ） */
-
-      -webkit-transition: width 0.7s ease-out;
-      transition: width 0.7s ease-out;
-   }
-
-   /* colors */
-   .flex > div:nth-child(1){ background : #009246; }
-   .flex > div:nth-child(2){ background : #F1F2F1; }
-   .flex > div:nth-child(3){ background : #CE2B37; }
-
-   .flex > div:hover
-   {
-        width: 200px;
-   }
-
-   </style>
-
- </head>
- <body>
-  <p>Flexbox nuovo</p>
-  <div class="flex">
-    <div>uno</div>
-    <div>due</div>
-    <div>tre</div>
-  </div>
- </body>
-</html>
- -

圣杯布局示例

- -

此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。

- -

HolyGrailLayout.png

- -

这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   display:         flex;
-   -webkit-flex-flow: row;
-           flex-flow: row;
-   }
-
-  #main > article {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #cccc33;
-   border-radius: 7pt;
-   background: #dddd88;
-   -webkit-flex: 3 1 60%;
-           flex: 3 1 60%;
-   -webkit-order: 2;
-           order: 2;
-   }
-
-  #main > nav {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 1;
-           order: 1;
-   }
-
-  #main > aside {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 3;
-           order: 3;
-   }
-
-  header, footer {
-   display: block;
-   margin: 4px;
-   padding: 5px;
-   min-height: 100px;
-   border: 1px solid #eebb55;
-   border-radius: 7pt;
-   background: #ffeebb;
-   }
-
-  /* 窄到已不足以支持三栏 */
-  @media all and (max-width: 640px) {
-
-   #main, #page {
-    -webkit-flex-flow: column;
-            flex-direction: column;
-   }
-
-   #main > article, #main > nav, #main > aside {
-    /* 恢复到文档内的自然顺序 */
-    -webkit-order: 0;
-            order: 0;
-   }
-
-   #main > nav, #main > aside, header, footer {
-    min-height: 50px;
-    max-height: 50px;
-   }
-  }
-
- </style>
-  </head>
-  <body>
- <header>header</header>
- <div id='main'>
-    <article>article</article>
-    <nav>nav</nav>
-    <aside>aside</aside>
- </div>
- <footer>footer</footer>
-  </body>
-</html>
- -

试验场地

- -

有几个在线弹性盒子试验场地可供进行各种实验：

- - - -

务必牢记

- -

描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。

- -

弹性盒子的排布与书写模式是一致的，这意味着排布的主轴起点和主轴终点根据的是开始与结束的位置。

- -

侧轴起点与侧轴终点依赖于开始或前面（before）的位置定义，而这个“前面”依赖于 direction 的值。

- -

只要 break- 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 break-after、break-before 和 break-inside，以及 CSS 2.1 中的 page-break-before、page-break-after 和 page-break-inside 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。

- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari
基础支持（单行弹性框）{{CompatGeckoDesktop("18.0")}}[6]{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
多行弹性框{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10[5]
- 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
特性Firefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
基础支持（单行弹性框）{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoMobile("22.0")}}		 -

1.0{{property_prefix("-moz")}}[2]
- 1.1

- 		2.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
多行弹性框{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
-
- -

[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。

- -

[2] 直到 Firefox 22 为止，用户必须修改 about:config 设置，将 layout.css.flexbox.enabled 改为 true 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 true，而 Firefox 28 中取消了此设置项。

- -

[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 已更新为 支持最终版本。

- -

[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。

- -

[5] 在 Opera 12.10 的弹性盒子初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。

- -

[6] 直到 Firefox 29 为止，在弹性项目上指定 visibility: collapse 将使其被视为 display: none 处理，而预期的行为是被视为 visibility: hidden。建议的处理方式是在弹性项目上使用 visibility:hidden，这样其行为应当与指派了 visibility:collapse 一致。更多信息，参考 {{bug(783470)}}.

- -

参见

- - diff --git a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html deleted file mode 100644 index 416b96e007..0000000000 --- a/files/zh-cn/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: 使用flexbox来布局web应用 -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -tags: - - CSS - - 弹性盒子 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -

{{CSSRef}}

- -

使用 flexbox 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、绝对定位 和一些JavaScript hacks, 使用仅仅几行 CSS 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：

- - - -

这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 flexbox 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 the more general guide to using CSS flexible boxes.

- -

基础

- -

如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} 属性, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。

- -

接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：

- - - -

有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。

- -

示例 1: 在页面中把一个元素居中

- -

在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。

- -

CSS 内容

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-
- -

HTML 内容

- -
<div class="vertical-box">
-  <div class="spacer"></div>
-  <div class="centered-element horizontal-box">
-    <div class="spacer"></div>
-    <div class="centered-element">Centered content</div>
-     <div class="spacer"></div>
-  </div>
-  <div class="spacer"></div>
-</div>
-
- -

结果

- -

{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}

- -

示例2: 垂直放置一系列的容器

- -

假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。

- -

CSS 内容

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-
- -

HTML 内容

- -
<div id="document" class="vertical-box">
-  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
-  <div id="flexible-content" class="flexible-size"></div>
-  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
-</div>
-
- -

Javascript 内容

- -
var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height > 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height < 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}
- -

结果

- -

{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}

- -

这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。

- -

示例3: 创建一个水平折叠的容器

- -

在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。

- -

CSS 内容

- -
.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
- -

HTML 内容

- -
<div id="container" class="horizontal-container">
-  <div class="fixed-size">Element 1</div>
-  <div class="fixed-size">Element 2</div>
-  <div class="fixed-size">Element 3</div>
-</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
-
- -

Javascript 内容

- -
var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width > 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width < 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-
- -

结果

- -

{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}

- -

参考

- - diff --git a/files/zh-cn/conflicting/web/css/easing-function/index.html b/files/zh-cn/conflicting/web/css/easing-function/index.html deleted file mode 100644 index 1e53f47c6d..0000000000 --- a/files/zh-cn/conflicting/web/css/easing-function/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: -slug: conflicting/Web/CSS/easing-function -tags: - - CSS - - timing-function -translation_of: Web/CSS/easing-function -translation_of_original: Web/CSS/timing-function -original_slug: Web/CSS/timing-function ---- -

{{ CSSRef() }}

- -

<timing-function> CSS 数据类型表示一个数学函数，它描述了在一个过渡或动画中一维数值的改变速度。这实质上让你可以自己定义一个加速度曲线，以便动画的速度在动画的过程中可以进行改变。这些函数通常被称为缓动函数。

- -

这是一个表示时间输出比率的函数，表示为{{cssxref("<number>")}}，0, 0 代表初始状态，1, 1 代表终止状态。

- -

输出比可以大于1.0（或者小于0.0）。这是因为在一种反弹效果中，动画是可以比最后的状态走的更远的，然后再回到最终状态。

- -

不过，如果输出值超过了它允许的范围，比如组成一个颜色的值大于了255或者小于了0，这个值会被修改为允许范围内的最接近的值（在颜色值这个例子中分别为255和0）。一些贝塞尔曲线展示了这些性质。

- -

定时函数

- -
-

CSS 支持两种定时函数：立方贝塞尔曲线的子集和阶梯函数。这些函数中最有用的是一个关键字，可以很容易地引用它们。

- -

cubic-bezier() 定时函数

- - - - - - - - -
-

- 		-

cubic-bezier() 定义了一条 立方贝塞尔曲线（cubic Bézier curve）。这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（easing functions）。

- -

一条立方贝塞尔曲线需要四个点来定义，P0 、P1 、P2 和 P3。P0 和 P3 是起点和终点，这两个点被作为比例固定在坐标系上，横轴为时间比例，纵轴为完成状态。P0 是 (0, 0)，表示初始时间和初始状态。P3 是 (1, 1) ，表示终止时间和终止状态。

- -

并非所有的三次贝塞尔曲线都适合作为计时函数，也并非所有的曲线都是数学函数，即给定横坐标为0或1的曲线。在CSS定义的P0和P3固定的情况下，三次贝塞尔曲线是一个函数，因此，当且仅当P1和P2的横坐标都在[0,1]范围内时，三次贝塞尔曲线是有效的。

- -

三次贝塞尔曲线的 P1或 P2坐标超出[0, 1] 范围可能会产生弹跳效果。

- -

当指定的三次贝塞尔曲线无效时，CSS将忽略整个属性。

-
-
- -

语法

- -
cubic-bezier(x1, y1, x2, y2)
-
- -

其中，

- -
-
x1, y1, x2, y2是<number>类型的值，它们代表当前定义立方贝塞尔曲线中的P1 和 P2点的横坐标和纵坐标，X1和X2必须在[0，1]范围内，否则当前值无效。
-
Are {{cssxref("<number>")}} values representing the abscissas and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.
-
- -

示例

- -

CSS 中允许使用这些贝塞尔曲线：

- -
cubic-bezier(0.1, 0.7, 1.0, 0.1)   The canonical Bézier curve with four <number> in the [0,1] range.
-cubic-bezier(0, 0, 1, 1)           Using <integer> is valid as any <integer> is also a <number>.
-cubic-bezier(0.3, -1.9, 2.1, -0.2) Negative values for ordinates are valid, leading to bouncing effects.
-cubic-bezier(0.1, 4, 0.6, 2.45)    Values > 1.0 for ordinates are also valid.
- -

像这些贝塞尔曲线的定义是无效的：

- -
cubic-bezier(0.1, red, 1.0, green) Though the animated output type may be a color, Bézier curves work w/ numerical ratios.
-cubic-bezier(-0.2, 0.6, -0.1, 0)   Abscissas must be in the [0, 1] range or the curve is not a function of time.
-cubic-bezier(0.3, 2.1)             The two points must be defined, there is no default value.
-cubic-bezier(1.1, 0, 4, 0)         Abscissas must be in the [0, 1] range or the curve is not a function of time.
-
- -

The steps() class of timing-functions

- - - - - - - - - - - - - -
- - - - - - - -
-

steps() 定义了一个以等距步长划分值域的步长函数。这个阶跃函数的子类有时也称为阶梯函数。

-
-
steps(2, start)steps(4, end)
- -

Syntax

- -
steps(number_of_steps, direction)
-
- -

where :

- -
-
number_of_steps
-
Is a strictly positive {{cssxref("<integer>")}} representing the amount of equidistant treads composing the stepping function.
-
direction
-
Is a keyword indicating if it the function is left- or right-continuous: -
    -
  • start denotes a left-continuous function, so that the first step happens when the animation begins;
    • -
  • end denotes a right-continuous function, so that the last step happens when the animation ends.
    • -
-
-
- -

Examples

- -

These timing functions are valid :

- -
steps(5, end)          There is 5 treads, the last one happens right before the end of the animation.
-steps(2, start)        A two-step staircase, the first one happening at the start of the animation.
-
- -

These timing function are invalid :

- -
steps(2.0, end)        The first parameter must be an <integer> and cannot be a real value, even if it is equal to one.
-steps(-3, start)       The amount of steps must be non-negative.
-steps(0, end)          There must be at least one step.
-steps(2)               The second parameter is not optional.
-steps(start, 3)        Though of different types, the order of parameter is important.
-step(1, end)           Even if there is one step, the function name is steps, with the plural 's'
-steps(3 end)           The two parameters must be separated with a comma; one or several spaces is not enough.
-
- -

常用定时函数关键字

- -

linear

- - - - - - - - -
-

此关键字表示定时函数cubic-bezier(0.0, 0.0, 1.0, 1.0)。使用这个定时函数，动画会以恒定的速度从初始状态过渡到结束状态。

-
- -

ease

- - - - - - - - -
此关键字表示定时函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)。 这个函数类似于 ease-in-out， 尽管它在开始时加速地更快，但在接近中间中，加速已经开始变慢了。
- -

ease-in

- - - - - - - - -
-

此关键字表示定时函数cubic-bezier(0.42, 0.0, 1.0, 1.0)。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止。

-
- -

ease-in-out

- - - - - - - - -
-

此关键字表示定时函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)。使用这个定时函数，动画开始的行为类似于 ease-in 函数，动画结束时的行为类似于 ease-out函数。

-
- -

ease-out

- - - - - - - - -
-

此关键字表示定时函数 cubic-bezier(0.0, 0.0, 0.58, 1.0)。动画开始很快，然后逐渐减慢，直到最终状态。

-
- -

step-start

- - - - - - - - -
此关键字表示定时函数 steps(1, start)。使用这个定时函数，动画会立刻跳转到结束状态，并一直停留在结束状态直到动画结束。
- -

step-end

- - - - - - - - -
-

此关键字表示定时函数 steps(1, end)。使用这个定时函数，动画会一直保持初始状态直到动画结束，然后立刻跳转到结束状态。

-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>') }}{{ Spec2('CSS3 Transitions') }}Defined anonymously
{{ SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>') }}{{ Spec2('CSS3 Animations') }}Defined anonymously, says to see definition in the CSS Transitions Module
- -

浏览器兼容性

- -

{{Compat("css.types.timing-function", 2)}}

- -

相关链接

- - -- cgit v1.2.3-54-g00ecf