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

概述我有一个页面,我有两个div元素具有不同的相对和固定的位置. <div class="outer1"></div><div class="outer2"></div> 和css是 .outer1{ width:50%; height:500px; background:red; position:relative; } .outer2{ 我有一个页面,我有两个div元素具有不同的相对和固定的位置.

<div ></div><div ></div>

和CSS是

.outer1{    wIDth:50%;    height:500px;    background:red;    position:relative;    }    .outer2{    wIDth:50%;    background:blue;    height:200px;    position:fixed;    }

但问题是两个div元素的实际宽度是不同的.
我给这两个元素的宽度都是50％然后为什么宽度有差异.请帮忙.

解决方法 你的div .outer1占据宽度：其父亲即身体的50％.
而div.outer2定位固定,因此从 normal document flow中删除,并将相对于视口定位自己.

由于每个浏览器都应用包含默认边距的默认“用户代理”样式表,因此元素的填充因此文档的宽度与视口的宽度不同,这就是宽度略有差异的原因.

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

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

总结

以上是内存溢出为你收集整理的html – 相对和固定的百分比宽度之间的差异全部内容，希望文章能够帮你解决html – 相对和固定的百分比宽度之间的差异所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。