left v/s margin-left and CSS: position

我正在玩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;
}

小提琴在这儿：http://jsfiddle.net/97jhB/.
我打算稍后添加javascript控件和用于左/右按钮的规定
首先，我只想从概念上了解它是如何工作的。

我正试图通过玩包装器的left来获得旋转木马的"效果"
如果我继续减少包装器的left，我将能够连续地看到盒子。

我有几个问题：

如果不将包装器的position设置为relative，则对其left所做的更改将不会生效。为什么会这样？包装器不是默认情况下应该是relative吗？
如果我使用包装器的margin-left而不是left，它似乎可以按要求工作
在这两种方法之间，什么更好：玩left还是玩margin-left？

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

Fixed是相对于视口的，absolute是从正常的页面流中提取的，并且是相对于第一个设置了CSS位置的父级，而relative只是相对于最近的块级祖先。

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

此外，请注意：fixed在较旧的移动设备上无法正常工作。

MDN在这个主题上有很好的文档。

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

但是，如果没有明确指定，则任何html元素的默认位置都是static。

position: static;

查看SO上的此链接，了解左裕度v/s差异的完整解释

左边距和左边距之间的差异

静态是默认的，最好的方法是使用包装器relative和项absolute，这样溢出的项就不会到达底部（~不会创建新行）。。。如果要遵循此路径，则必须删除float:left。
可能最好使用左侧（如果是RTL，则为右侧），如果你想在旋转木马幻灯片之间留出一些空白，那么想想你有多个可见项目的场景。

相关内容

最新更新

热门标签：