Question

我有这样的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，但#header与页面顶部和#footer以及页面底部之间存在细微的偏移。这些偏移来自何处以及如何在不使用左侧和顶部的情况下将其移除？

3）页脚在左右冒号的顶部，尽管它被设置在它们下面（清除：两者）。如何让它出现在左右div之下？

Answer 1

#left（20％）和#right（60％）div的总宽度不等于宽度 #header（80％）尽管百分比总和相等。它在哪里来自？如何使这个总和匹配？

我的铬和ff看起来相同.. !! ：）

#header与页面顶部和#footer之间存在细微偏移尽管填充和边距设置为0px，但页面底部。这些偏移来自何处以及如何在不使用的情况下将其移除左边和顶部？

那是因为您尚未从margin和body移除默认html。

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

在HTML中，大多数标签（不是全部，但大多数）都有默认的填充和边距设置通过浏览器例如，body，<ul>等存在默认填充/边距...因此您需要像上面一样手动删除它们，或者在使用任何样式之前使用 css reset 工具。

尽管设置为页脚，页脚仍会在左右冒号的顶部在他们之下（明确：两者）。如何让它出现在左下方的div？

在HTML DOM中，默认情况下，所有内容都位于relative，因此您无需明确提及....删除position:relative
另外，对于clear:both，您必须在div类之外提及或使用伪after / before ....原生css方式，必须按以下方式完成：< / p>

    <div id="right"></div>
       <div style="clear:both"></div> <!-- clear float of #right -->
    <div id="footer"></div>

另外，附注：更好的做法是将所有div包装在主容器中并对其应用样式以使内容居中并定义通用CSS !!

fiddle to help u understand my point

Answer 2

有预定义的保证金＆amp;浏览器中每个元素的填充，这就是为什么你没有得到60+20 = 80 重置保证金＆amp;填充为0将为您提供预期的结果。但是使用它非常气馁。

   *{
        margin:0;
        padding:0;
    }

http://jsfiddle.net/Emme7/

Here is the old default style of a browser as suggested by W3C。
Browser default CSS

Answer 3

您的定位是相对于元素的原始位置，但您希望它们相对于页面。使用position: absolute代替position: relative

#left, #right {
    position: absolute;
    float: none;
}

编辑：如果您不介意更改html，可以尝试这样做：

CSS：

#wrapper {
    width:80%;
    margin: auto;
}
#header {
    background-color: black;
    height: 60px;
}
#left {
    background-color: blue;
    width: 20%;
    float: left;
}
#right {
    background-color: green;
    width: 80%;
    float: right;
}
#left, #right {
    height: 600px;
}
#footer {
    background-color: red;
    height: 40px;
    clear: both;
}
#left, #right, #header, #footer {
    margin: 0;
    padding: 0;
}

HTML：

<div id="wrapper">
    <div id="header"> </div>
    <div id="right"> </div>
    <div id="left"> </div>
    <div id="footer"> </div>
</div>

http://jsfiddle.net/WGur4/

Chrome中的意外定位

3 个答案: