左侧与margin-left的区别以及CSS：position

Question

左侧与margin-left的区别以及CSS：position

3

我可以帮助您翻译这段内容，该段落描述了制作一个HTML/CSS的轮播图的过程。

HTML：

<body>
    <div id="container">
        <div id="wrapper">
            <div id="d1" class="box"><p>DIV#1</p></div>
            <div id="d2" class="box"><p>DIV#2</p></div>
            <div id="d3" class="box"><p>DIV#3</p></div>
            <div id="d4" class="box"><p>DIV#4</p></div>
        </div>
    </div>
</body>

CSS：

.box {
    height: 100px;
    width: 100px;
    margin: 15px;
    border: 2px solid black;
    color: black;
    float: left;
}

#container {
    width: 150px;
    height: 144px;
    overflow: hidden;
    border: 2px solid black;
}

#wrapper {
    height: 140px;
    width: 555px;
    border: 2px solid green;
    position: relative;
    left: 0px;
}

#d1 {
    background-color: blue;
}

#d2 {
    background-color: red;
}

#d3 {
    background-color: green;
}

#d4 {
    background-color: yellow;
}

这是 jsfiddle 的链接：http://jsfiddle.net/97jhB/。
我打算稍后添加 JavaScript 控件和左/右按钮。
首先，我只想概念性地了解它是如何工作的。

我试图通过调整包裹层的 left 来实现图片轮播效果。
如果我不断减少包裹层的 left，我将能够逐步看到盒子。

我有几个问题：

如果我不将包裹层的 position 设置为 relative，对它的 left 进行更改将不会生效。为什么？难道包裹层默认不是相对定位吗？
如果我玩弄包裹层的 margin-left 而不是 left，它似乎也能按照预期运行。
在这两种方法之间哪个更好？使用 left 还是 margin-left?

- anujit

3个回答

0

当您将CSS声明position:relative分配给div时，实际上并没有移动它在页面上占用的空间，只是改变了其显示位置。

但是，如果未明确指定，则任何HTML元素的默认位置为static。

position: static;

看看这个SO链接，了解margin-left与left之间的区别的非常完整的解释

margin-left和left的区别

- AnaMaria

不，但你肯定没有给我的答案点赞，而且你的答案和我的非常相似。 - Alex W

回到你的问题。是一样的。只是表达方式不同。例如2+2=4或者2+2=3+1。 - AnaMaria

好的。我仍然怀疑你怀疑我。所以我会给你点赞。现在你会看到我没有给你踩。 - AnaMaria

@AnaMaria 谢谢你的答案和 Stack Overflow 链接。我明白了两者之间的区别。 - anujit

0

静态是默认值，最好的做法是将包装器设置为relative，并将项目设置为absolute，这样溢出的项目就不会到底部（~不会创建新行）...如果您想遵循这条路线，您将不得不删除float:left。
最好使用左侧（如果是RTL，则使用右侧），如果您希望轮播幻灯片之间有一些间距，请考虑以下情况：当您有多个可见项时。

- Nabil Kadimi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex W · Accepted Answer

因为只有相对定位、绝对定位和固定定位使用left、right、top和bottom来定义它们相对于当前上下文的位置。

固定定位相对于视口，绝对定位脱离了正常页面流，并相对于第一个具有CSS定位设置的父元素，而相对定位仅relative to the nearest block-level ancestor。

静态定位是默认位置，使用margin-left、margin-right等来将元素相对于页面流中其他元素定位在最近的块级祖先内部。

此外，请注意position:fixed在older mobile devices上的效果不如预期。

MDN在这个主题上有great documentation。