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

【问题标题】：What's the most effective way to use multiple background colors for the entire page?为整个页面使用多种背景颜色的最有效方法是什么？
【发布时间】：2014-03-06 16:39:02
【问题描述】：

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

我希望整个背景为蓝色，某些容器中的部分为红色。我希望红色一直从页面的一侧到另一侧，而没有浏览器可能呈现的任何空白。这是我所拥有的：

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 标签中是正确/或有效的方法吗？

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

【问题讨论】：

google for css reset (or normalize) ...或者看看这个问题stackoverflow.com/questions/99643/…

标签： css html background

【解决方案1】：

将此添加到您的 CSS 规则中：

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

这将消除边距。 http://jsfiddle.net/TZRhn/

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

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

查看reset.csshere的更多讨论

【讨论】：

我不太喜欢使用Universal Selector，理想情况下你应该使用reset.css。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

确实

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

如果您不希望 div 的内容接触边缘，您现在必须为 div 添加填充

【讨论】：