From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/position_value/index.html | 164 ++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/zh-cn/web/css/position_value/index.html (limited to 'files/zh-cn/web/css/position_value/index.html') diff --git a/files/zh-cn/web/css/position_value/index.html b/files/zh-cn/web/css/position_value/index.html new file mode 100644 index 0000000000..d96912be34 --- /dev/null +++ b/files/zh-cn/web/css/position_value/index.html @@ -0,0 +1,164 @@ +--- +title: +slug: Web/CSS/position_value +translation_of: Web/CSS/position_value +--- +

{{ CSSRef() }}

+ +

概要

+ +

<position> CSS  数据类型表示用于设置相对于框的位置的2D空间中的坐标。

+ +

特定坐标可以由具有特定偏移的两个关键字给出。关键字表示元素框的一条边或两条边之间的中心线：左，右，上，下或中心 (其表示左边缘和右边缘之间的中心，或者顶部边缘或底部边缘之间的中心，这取决于上下文).

+ +
+

 A keyword represents one edge of the element's box or the center line between two edges: left, right, top, bottom or center (which represents either the center between the left and right edges, or the center between the top or bottom edges, depending on the context).

+
+ +

{{ experimental_inline() }}一个偏移量可以是一个相对值用以表示 {{cssxref("<percentage>")}} （百分比），或是一个绝对的 {{cssxref("<length>")}} （长度）值。正值是向右或向下的偏移，看适用于哪一个。负值则是在另外方向上的偏移。

+ +

 <position> 值表述的最终位置并不需要位于元素的盒子中。

+ +

如果仅指定单个偏移量，它将指定x轴坐标。当只有单个偏移量或关键字被指定时，对于另个轴的值将被假定为“center”。

+ +

补间

+ +

横坐标值和纵坐标值都独立进行补间。而由于两者（补间）速度都由同一 {{cssxref("<timing-function>")}} （函数）定义，点将沿一条直线移动。

+ +

取值

+ +
/* 1-value syntax */
+keyword                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
+<length> or <percentage> /* The position on the x-axis, 50% for the y-axis */
+
+/* 2-value syntax */
+keyword keyword          /* A keyword for each direction, the order is irrelevant */
+keyword value            /* The value is the offset for the edge defined by the keyword */
+
+ +

正式语法

+ +
[ [ left | center | right | top | bottom | <percentage> | <length> ] |
+                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
+                  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
+                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
+                ]
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Values', '#position', '<position>') }}{{ Spec2('CSS3 Values') }}Relists links to both definition, with the requirement to be coherent: if {{ SpecName('CSS3 Backgrounds', '', '') }} is supported, its definition of <position> must be used too.
{{ SpecName('CSS3 Backgrounds', '#ltpositiongt', '<position>') }}{{ Spec2('CSS3 Backgrounds') }}Defines <position> explicitly and extends it to support offsets from any edge. {{ experimental_inline() }}
{{ SpecName('CSS2.1', 'colors.html#background-properties', '<position>') }}{{ Spec2('CSS2.1') }}Allows combination of a keyword with a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}} value.
{{ SpecName('CSS1', '#background-position', '<position>') }}{{ Spec2('CSS1') }}Defines <position> anonymously as the value of {{ cssxref("background-position") }}.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop("1") }}4.03.51.0 (85)
Combination of a keyword and a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}}1.0{{ CompatGeckoDesktop("1") }}4.03.51.0 (85)
Four-value syntax (support for offset from any edge) {{ experimental_inline() }}{{ CompatNo() }} {{ webkitbug("37514") }}{{ CompatGeckoDesktop("13.0") }}{{ CompatNo() }}10.5{{ CompatNo() }} {{ webkitbug("37514") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Combination of a keyword and a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Four-value syntax (support for offset from any edge) {{ experimental_inline() }}{{ CompatNo() }}{{ CompatGeckoMobile("13.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

 

-- cgit v1.2.3-54-g00ecf