html - 理解 html 标记中的样式解析

Question

我使用的是 Firefox 25.0.1。我试图理解，为什么 div block 由

定义

<div style="position: absolute; margin: auto; width: 240px; height: 75px; top:0; left:0;right:0; bottom:0;">
    some content
</div>

将位于浏览器窗口的中心。但是下面

<div style="position: absolute; margin: auto; width: 240px; height: 75px;">
    some content
</div>

将位于浏览器窗口的左上角。 下面两个div block

<div style="position: absolute; margin: auto; width: 240px; height: 75px; left: 0; right:0;">
    some content
</div>

和

<div style="position: absolute; margin: 0 auto; width: 240px; height: 75px;">
    some content
</div>

只有水平居中对齐，但是

<div style="position: absolute; margin: auto; width: 240px; height: 75px; left: 0;">
    some content
</div>

位于浏览器的左上角。我很困惑，我不明白，相应的 HTML 代码是如何解析的。请向我解释它是如何工作的。

Answer 1

您可以在具有使用 position:relative;

的父级的元素上使用绝对位置

使用 left、right、top 或 bottom 会将该元素定位到距父元素多少像素的位置。

如果你有这个例子，它会将内部 div 放置在距离父级顶部 10px 和距离左侧 0px 的位置

<div style="position:relative">
    <div style="position: absolute; width: 240px; height: 75px; left: 0; top:10px">
        some content
    </div>
</div>