css - 位置设置为绝对时，margin-left 和 left 的区别

Question

1.position:absolute;left:200px;

2.position:absolute；margin-left:200px;

上述风格有什么不同吗？

Answer 1

有细微的差别。

考虑以下示例：

<div class="wrap">
    <div class="ex1">Ex 1</div>
    <div class="ex2">Ex 2</div>
    <div class="ex3">Ex 3</div>
</div>

body {
    margin: 0;
}
.wrap {
    margin: 0 50px;
    background-color: lightgray;
    height: 200px;
    width: 400px;
}
.ex1 {
    position: absolute;
    background-color: beige;
    margin-left: 50px;
}
.ex2 {
    position: absolute;
    left: 50px;
    background-color: beige;
    margin-left: 0px;
}
.ex3 {
    position: absolute;
    top: 50px; /* so you can see what is happening */
    left: 0px;
    background-color: beige;
    margin-left: 50px;
}

并在以下位置查看结果：http: //jsfiddle.net/audetwebdesign/WQA6B/

在示例 1 ( .ex1) 中，边距是距离父容器 ( .wrap) 的左边缘 50 像素。

在示例 2 ( .ex2) 中，元素距离视口的左边缘 50 像素。

要获得.ex2与 类似的行为.ex1，您需要设置position: relative 为，.wrap以便两个 div 相对于相同的上下文定位。

还有另一个因素。在示例 1 中，我没有指定任何偏移量，因此如果您使用了 ，则元素将保持在该位置position: static，这就是边距是相对于包装器的左边缘计算的原因。

如果我设置了left: 0（参见示例 3），您将得到类似于示例 2 的结果。

Answer 2

尽管他们可以做类似的事情，但他们完全不同。

边距是盒子模型的一部分，它还包括padding和border。盒子模型样式改变对象本身的大小。

例如，如果您有一个具有以下样式的图像：

.my_box {
  display:block;
  margin-left:10px;
}

具有该类的元素my_box将在框的左侧添加 10 像素的边距。

顶部、左侧等

这些是positions，而不是增加元素框模型的大小，而是从字面上告诉元素在哪里。

.my_box {
  display:block;
  left:10px;
}

上面的样式将告诉该元素距其容器左侧 10 像素（如果position:relative，或页面（如果position:absolute）。

Answer 3

是的，有区别。

见小提琴：http: //jsfiddle.net/xk8Lz/

注意10px padding“父”元素中的绝对定位元素。填充和边框将影响绝对定位 Div 中的边距。

Left 将从“父”元素的开头开始计数。

代码：

<div class="left">
    left parent
    <div class="abs">Left</div>    
</div>

<div class="marginLeft">
    margin left parent
    <div class="abs">Margin-Left</div>    
</div>

CSS：

div, span {
    border: 1px solid #000;
    height: 80px;
    width: 80px;
}
.left, .marginLeft {
    background: #aaf;
    margin: 10px 0 0 10px;
    padding: 10px;
    position: relative;
}
.marginLeft {
}
.abs {
    background: #faa;
    position: absolute;
        top: 0;
}
.left .abs {
    left: 100px;
}
.marginLeft .abs {
    margin-left: 100px;
}