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/left/index.html | 210 ++++++++++++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 files/zh-cn/web/css/left/index.html (limited to 'files/zh-cn/web/css/left') diff --git a/files/zh-cn/web/css/left/index.html b/files/zh-cn/web/css/left/index.html new file mode 100644 index 0000000000..376c0b8168 --- /dev/null +++ b/files/zh-cn/web/css/left/index.html @@ -0,0 +1,210 @@ +--- +title: left +slug: Web/CSS/left +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/left +--- +
{{CSSRef}}
+ +

CSS left属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移,非定位元素设置此属性无效。

+ +
/* <length> values */
+left: 3px;
+left: 2.4em;
+
+/* <percentage>s of the width of the containing block */
+left: 10%;
+
+/* Keyword value */
+left: auto;
+
+/* Global values */
+left: inherit;
+left: initial;
+left: unset;
+
+ +

left的效果取决于元素的position属性:

+ + + +

left{{cssxref("right")}}​​​​​​同时指定时,元素的位置会被重复指定。当容器是从左到右时,left的值会被优先设定;当容器是从右到左时,right的值会被优先设定。

+ +

{{cssinfo}}

+ +

语法

+ +

+ +
+
{{cssxref("<length>")}}
+
可以是负的,正的 或者 null {{cssxref("<length>")}} 表示: +
    +
  • 对于绝对定位的元素,元素左外边距边界与其包含块左边界之间的偏移。
  • +
  • 对于相对定位定位的元素,元素的左边界离开其正常位置的偏移。
  • +
+
+
{{cssxref("<percentage>")}}
+
代表元素包含块的宽度的百分比 {{cssxref("<percentage>")}}。
+
auto
+
这个关键字表示: +
    +
  • 对于绝对定位元素,元素将忽略此属性而以{{ Cssxref("right") }}属性为准,如果此时设置width: auto,将基于内容需要的宽度设置宽度;如果right也为auto的话,元素的水平位置就是它假如作为静态(即static)元素时该在的位置。
  • +
  • 对于相对定位元素,元素相对正常位置的偏移量将基于{{ Cssxref("right") }}属性;如果right也为auto的话,元素将不会有偏移。
  • +
+
+
inherit
+
这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 或 auto 一样。
+
+ +

常用语法

+ +
{{csssyntax}}
+ +

示例

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+ +

HTML

+ +
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative position in relation to its siblings.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relative to its sibling div above, but removed from flow of content.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      </pre>
+      <p>Absolute position inside of a parent with relative position</p>
+    </div>
+  </div>
+</div>
+ +

案例

+ +

{{EmbedLiveSample('示例',1200,650)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}{{Spec2('CSS3 Transitions')}}Defines left as animatable.
{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}{{Spec2('CSS3 Positioning')}}Adds behavior for sticky positioning.
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容

+ + + +

{{Compat("css.properties.left")}}

+ +

参见

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