0

再会！我今天遇到了一个奇怪的问题。这有点奇怪，但我真的很高兴我遇到了它，因为现在我可以学习新的东西了。

据我了解，边距（我们谈论的是纯 css 定位 atm）基于元素所在的容器。
例如，如果我有一个divwith width Xand height Yand 2 个段落，当我将段落样式设置为让它位于顶部 2%的margin-top : 2%像素之后。
如果没有容器，浏览器会考虑到窗口的边框，这对我来说是合乎逻辑的。显然，这种理解是错误的。

我是如何得出这个结论的：考虑以下内容 - 一个横幅，距离顶部 1%，登录框距离顶部 2%，内容字段距离顶部 8%。（也有左边距值，但它们无关紧要，因为对此的解决方案也是它们的解决方案）

实际发生的情况是边距是在最后一个元素之后进行的，因此这意味着登录框的样式在菜单框之后 2%，这意味着它的样式设置为偏移量，该偏移量是所有先前所有偏移量的总和元素。

我的问题是我该如何处理？如何使窗口边框而不是前一个元素的边距？

另外，这里是源代码，以防有人对我所写的内容感兴趣：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
<style>

    .menu {
    width:600px;
    height:100px;
    background-color:black;
    margin-top:1%;
    margin-left:33%;
    float:left;
    }

    .login {
    width: 150px;
    height: 200px;
    background-color:red;
    margin-top:2%;
    margin-left:87%;
    float:none;
    }

    .content {
    width:600px;
    min-height:300px;
    background-color:blue;
    float:left;
     margin-top:1%;
    margin-left:33%;
    }

    .flush {
        clear: both;
    }

    body {
    background-color:#daeaf1;
    }
</style>
</head>
<body>
  <div class="menu"></div><div class="login"></div><div class="content"></div>
</body>
</html>
4

1 回答 1

0

好吧，您发现margin 与HTML 元素流有关，这是正确的。

如果你想设置元素不流动，那么你应该使用 position、top、left、right 和 bottom 属性。

可能在您的情况下您应该使用：

.login {
  position: absolute;
  top: 2px;
  right: 20px;
  ...
}
于 2013-06-26T16:18:21.233 回答