Question

美好的一天！我今天遇到了一个奇怪的问题。这有点奇怪，但实际上我很高兴遇到它，因为现在我开始学习新东西了。

据我所知，边距（我们谈论的是纯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>

Answer 1

嗯，您发现边距与HTML元素流有关。

如果您想要将元素设置为流量，那么您应该使用位置，顶部，左侧，右侧和底部属性。

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

.login {
  position: absolute;
  top: 2px;
  right: 20px;
  ...
}

边距格式与元素而不是浏览器窗口相关联？

1 个答案: