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

Summary

+ +

Area on which CSS margin-left applymargin-left  属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。

+ +

竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing。

+ +

在长度(width)被约束这种极少情况下，( 即当所有的宽度，左边界，边界，填充内容区域和边缘都被定义), 左边界会被忽略，如果被制定为auto值，会有相同的计算值。

+ +

{{cssinfo()}}

+ +

Syntax

+ +
/* <length> values */
+margin-left: 10px;  /* 绝对长度 */
+margin-left: 1em;   /* 相对于字号的长度 */
+margin-left: 5%;    /* 相对最近块元素的宽度 */
+
+/* Keyword values */
+margin-left: auto;
+
+/* Global values */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

Values

+ +
+
<length>
+
一个固定宽度 {{cssxref("<length>")}} 值 : 可以是一个绝对宽度, e.g. in px, 也可以是个相对宽度, e.g. in em, 或者相对视窗的大小, e.g. in vh.
+
<percentage>
+
百分比值 {{cssxref("<percentage>")}} 最近的块容器的宽度 width .
+
auto
+
auto关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto，那么最后计算的空间分布，会根据display，float，position属性，自动生成以下几种情况： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Value of {{cssxref("display")}}Value of {{cssxref("float")}}Value of {{cssxref("position")}}Computed value of autoComment
inline, inline-block, inline-tableanystatic or relative0Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-captionanystatic or relative0, 除非margin-left和   margin-right同时都设置为auto. 这样的话，元素就被设置为基于父元素居中。Block layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft or rightstatic or relative0Block layout mode (floating element)
any table-*, except table-captionanyany0Internal table-* elements don't have margins, use {{ cssxref("border-spacing") }} instead
any, except flex, inline-flex, or table-*anyfixed or absolute0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.Absolutely positioned layout mode
flex, inline-flexanyany +

在水平方向上有空余空间的情况下，空余的空间会被平均分给水平方向上写有margin-left:auto属性的元素的外边距

+ 		Flexbox layout mode
+
+
+ +

Formal syntax

+ +
{{csssyntax()}}
+ +

Examples

+ +
.content { margin-left:   5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3 Box')}}No significant change from CSS 2.1.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}Defines margin-left as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}Defines the behavior of margin-left on flex items.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}Like in CSS1, but removes its effect on inline elements.
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
-- cgit v1.2.3-54-g00ecf