美好的一天!我今天遇到了一个奇怪的问题。这有点奇怪，但我真的很高兴我遇到了它，因为现在我可以学到一些新东西。
据我了解，边距(我们谈论的是纯 css 定位 atm)是基于元素所在的容器。
例如，如果我有一个 div，width X 和 height Y 以及其中的 2 个段落，当我将段落样式设置为有 margin-top : 2% 它将定位在距顶部 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>
最佳答案
好吧，您发现边距与 HTML 元素流相关，这是正确的。
如果你想将元素设置为流外，那么你应该使用 position、top、left、right 和 bottom 属性。
可能在您的情况下您应该使用:
.login {
position: absolute;
top: 2px;
right: 20px;
...
}
关于html - 边距格式与元素而不是浏览器窗口有关？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17325273/