1

我在我正在从事的几个项目中一直遇到这个问题。

我确定这是一个基本问题，我尝试寻找答案但无济于事。

整个页面的代码是：

HTML

<html>
    <head>
    <link rel="stylesheet" href="cssbin/default.css" type="text/css">

    </head>

    <body>

        <header>
        </header>

        <nav>

        </nav>

        <section>


        </section>

        <footer>

        </footer>
    </body>
</html>

CSS：

body {
    background-color: #B3BDE6;
}

header {
    height: 200px;
    background-color: #020C36;
}

nav {
    height:100px;
    background-color: #7A8FE6;
}

section {
    height:500px;
    background-color: #2B314D;
}

footer {
    height: 200px;
    background-color: #020c36;
}

body, header, nav, section, footer {
 border: 1px solid black;
}

下面的网页显示了我在说什么：

http://virtualharrogate.co.uk/template.php

在谷歌浏览器中，页面是框架的，我不确定是否在每个浏览器中都会发生这种情况，但如果没有其他问题，我需要纠正 chrome 的问题......

我问为什么那里的边界（因为我显然错过了某处的点）以及如何解决这个问题？

我尝试使用 css 属性设置页面样式，width: 100%; & height: 100%;但仍然没有。

提前致谢

4

3 回答 3

3

发生这种情况是因为默认情况下body具有margin:8px.

这是默认样式表 - http://www.w3.org/TR/CSS21/sample.html

只需添加一个margin:0;样式来纠正它。

在应用自定义 css 之前，您应该使用某种 css 重置。这是处理事情的正确方式。

查看Initializr。它提供了更多功能，包括 IE6+ 兼容性/回退等。

于 2012-07-05T20:57:24.963 回答
0

查看 CSS 的最后一行：

body, header, nav, section, footer {  border: 1px solid black; }

这是在所有这些元素周围添加 1px 边框。尝试从那条线上移除身体。

于 2012-07-05T21:00:03.897 回答
0

只需使用body {margin: 0;} 或body {margin: auto;}

于 2012-07-05T21:02:59.243 回答