我有这样的html代码：
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="stylesheets.css" />
</head>
<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>
</html>
和一个CSS代码：
body{
padding:0px;
}
div {
border-radius: 5px;
border-collapse: collapse;
margin:0px
}
#header {
z-index: 1;
position: fixed;
width: 80%;
height: 60px;
background-color: #000028;
margin: auto;
left: 10%;
}
#left {
width: 20%;
height: 1500px;
background-color: #B9D7D9;
z-index: 2;
position: relative;
float: left;
top: 60px;
left: 10%;
}
#right {
width: 60%;
z-index: 0;
height: 1500px;
background-color: #4AB7FF;
position: relative;
float: right;
right: 10%;
top: 60px;
}
#footer {
height: 50px;
background-color: #668284;
clear: both;
width: 80%;
z-index: 3;
position: relative;
left:10%;
}
当我在Chrome中启动此程序时，存在三个问题：
1）尽管百分比总和相等，但#left（20％）和#right（60％）div的总宽度不等于#header（80％）的宽度。它从何而来？如何使这个总和匹配？
2）尽管填充和边距设置为0px，但在页眉和页面顶部与页脚和页面底部之间存在细微的偏移。这些偏移量来自何处，以及如何在不使用left和top的情况下将其删除？
3）页脚位于左和右结肠的顶部，尽管它已设置在它们的下方（清除：均为）。如何使其显示在左右div下方？
尽管百分比总和相等，但#left（20％）和#right（60％）div的总宽度不等于#header（80％）的宽度。它从何而来？如何使这个总和匹配？
在我的铬和铬上看起来都一样。:)
尽管页眉和页边距设置为0px，但#header和页面顶部之间以及#footer和页面底部之间都存在少量偏移。这些偏移量来自何处，以及如何在不使用left和top的情况下将其删除？
这是因为您尚未margin从body和中删除默认值html。
html,body {
padding:0px;
margin:0;
}
在HTML中，大多数标签（不是全部，而是大多数）具有浏览器设置的默认填充和边距。
例如，存在用于等的默认填充/边距body，<ul>因此...您需要像上面一样手动删除它们或使用css重置工具，然后再使用任何样式。
尽管页脚位于左右结肠的下方，但页脚仍位于其顶部（clear：both）。如何使其显示在左右div下方？
在HTML DOM，默认情况下，一切都被定位relative，所以你不需要明确提到它....删除position:relative
此外，要clear:both，你必须提到这一点外的DIV类或使用伪象after/ before....机CSS方式，必须按照以下步骤进行：
<div id="right"></div>
<div style="clear:both"></div> <!-- clear float of #right -->
<div id="footer"></div>
另外，请注意：更好的做法是将所有内容包装div在主容器中，并对其应用样式以使内容居中并定义通用CSS！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句