再会!我今天遇到了一个奇怪的问题。这有点奇怪,但我真的很高兴我遇到了它,因为现在我可以学习新的东西了。
据我了解,边距(我们谈论的是纯 css 定位 atm)基于元素所在的容器。
例如,如果我有一个div
with width X
and height Y
and 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>