Question

h1和p应该在白色包装div里面，我不明白他们为什么在外面，有人可以解释一下吗？不幸的是我不允许发布图片，但是h1和p将自己推到了白色背景的包装器上面...当我不使用标签时，文本突然出现在包装内

HTML：

<!doctype html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
<p id='before-header'>This is the before header area</p>

<div id='wrapper'>
    <h1>Why is this outside of the white box?</h1>
    <p>and this as well?</p>
    but when I dont use tags... suddenly its insider, what magical stupid mistake am I doing?
</div>
</body>

这是css：

*{
    margin: 0 auto;
    background-image: url('background.png');
}

#wrapper{
    margin: auto;
    width: 960px;
    height: 2000px;
    background: white;
}

#before-header{
    text-align: center;
}

Answer 1

这是因为你在所有东西上设置背景图像，所以它看起来好像h1在白框之外，因为它实际上在白框顶部但是背景图像所以看起来好像它在白盒子外面。

css中的星号（*）选择器是所有内容的毯子，因此专门定位您想要拥有背景图像的内容：

body {
    margin: 0 auto;
    background-image: url('background.png');
}

Example of background targeting everything

Example of background targeting body only

Answer 2

http://jsfiddle.net/zj9v81t7/20/
请试试这个css：

*{
    margin: 0 auto;
    background-image: url('background.png');
}
#wrapper h1 {
    float: left;
    margin: 5px auto;
    width: 100%;
}#wrapper > p {
    float: left;
}
#wrapper{
    margin: auto;
    width: 960px;
    height: auto;
    background: red; overflow: hidden;
}

#before-header{
    text-align: center;
}

为什么这些元素不在我的包装器中？

2 个答案: