html - 相对和固定的百分比宽度之间的差异

Question

我有一个页面，其中有两个具有不同相对和固定定位的 div 元素。

<div class="outer1">
</div>
<div class="outer2">
</div>

css是

 .outer1{
    width:50%;
    height:500px;
    background:red;
    position:relative;
    }

    .outer2{
    width:50%;
    background:blue;
    height:200px;
    position:fixed;
    }

但问题是两个 div 元素的实际宽度不同。我已将两个元素的宽度设为 50%，那么为什么宽度存在差异。请帮忙。

Answer 1

您的 div .outer1 占用其父级的 width: 50%，即 body。而您的 div .outer2 位于 fixed 中，因此从 normal document flow 中删除并将根据视口(viewport)定位自己。

由于每个浏览器都应用默认的“用户代理”样式表，其中包括默认边距、元素的填充，因此文档的宽度与视口(viewport)的宽度不同，这就是宽度略有不同的原因。

您可以重置默认浏览器样式，以获得所需的结果。

html, body {
  margin: 0;
  padding: 0;
}