在整个页面中使用多种背景颜色的最有效方法是什么？

Question

我正在尝试创建多色背景。

我希望整个背景为蓝色，并在某些容器中显示红色部分。我希望红色从页面的一边到另一边一直没有任何可以由浏览器呈现的空格。这就是我所拥有的：

HTML：

<div class="Blue">
   Here is one color
</div>

<div class="Red">
    Here is one color
</div>

<div class="Blue">
    Here is one color
</div>

<div class="Red">
    Here is one color
</div>

CSS：

.Blue {
    width:100%; /* I want the width of the background to be 100% of the page ?*/
    height: 30%; /* I want the height of the background container to be 30% of the page? */
    background-color: blue;
}
.Red {
    width:100%;
    height: 30%; /*The next 30% of the page ? */
    background-color: red;
}

http://jsfiddle.net/4DXDX/边缘偏移，边缘有白边。

如何让颜色从边缘到边缘一直延伸？将正确的颜色放在div标签中是否正确/有效？

下面是我要创建的背景图片。

Answer 1

将此添加到您的CSS规则：

* {
   margin: 0px;
   padding: 0px;
}

这将摆脱边际。 http://jsfiddle.net/TZRhn/

另外，请查看this question了解详情。

在评论@Kheema中提到，通用选择器可能是一个坏主意。您可以改为使用reset.css。

查看reset.css here

的更多讨论

Answer 2

您必须从页面中删除margin和padding。最简单的方法是使用这种样式删除填充和边距。

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

注意：最好使用reset.css文件来避免这种奇怪的问题。

Answer 3

的确

* {
margin: 0px;
padding: 0px;
}

如果您不希望div的内容触及边缘，您必须立即向div添加填充