简单的CSS宽度问题

Question

我是网络开发新手（1个月），出于某种原因，我发现一个简单的CSS问题很难理解。

我有2个DIV：

<div class="full">

    <div class="banner">
        My Company logo/slogan
    </div>

</div>

使用CSS：

.full {
    width: 100%;
}

.banner {
    background: red;
    height: 45px;
}

我不理解的是，为什么带横幅的DIV不会消耗整个页面宽度？即使它的父级已满，也有width: 100% ??

我必须应用margin-left和right来取全宽，例如：

http://jsfiddle.net/4eaGv/2/

由于

Answer 1

它与用户代理样式相关，默认情况下每个浏览器都应用于html元素。为避免这种情况，我们需要重置这些值。与您的情况一样，您需要为body元素重置这些值

body
{
    padding:0;
    margin:0;
}

现在试试你的代码。它会起作用。

Demo

Answer 2

这是因为浏览器在帧内应用填充。您可以通过使用CSS重置来克服此问题。在您的情况下，只需添加 * { padding: 0; margin: 0 }即可。

http://jsfiddle.net/4eaGv/6/

Answer 3

您必须将横幅div上的width设置为100％

.banner {
    background: red;
    height: 45px;
    width: 100%;
}

如果你有一些填充，请将填充和边距设置为html / body为0.

body
{
   padding: 0;
   margin: 0;
}

http://jsfiddle.net/4eaGv/4/

Answer 4

所有浏览器都固有地赋予某些元素样式。

只需将此CSS添加到您的代码中：

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

有些人遗漏了边框，但我喜欢把它放进去因为我发现IE经常为某些<a>元素添加边框

更新了小提琴：http://jsfiddle.net/4eaGv/3/

Answer 5

默认情况下，网页有一点边距/填充。大多数CSS都以：

开头

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

顺便说一下，如果你这样做，div会自动扩展以适应它们的父容器，即100％的宽度是不必要的。

Answer 6

你需要重置身体。

body {

margin : 0px !important;
 padding : 0px !important;
}

使用现有的CSS。