CSS：页边距上的不可见背景_Css

CSS：页边距上的不可见背景

css

CSS：页边距上的不可见背景,css,Css,我认为这是一个相当简单的问题，所以我将粘贴代码 <!DOCTYPE html> <html> <head> <title></title> <style> *{ margin:0; padding:0; } .c1 { background: yellow; wid

我认为这是一个相当简单的问题，所以我将粘贴代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        .c1 {
            background: yellow;
            width: 800px;
        }

        .c2 {
            background: blue;
            margin: 50px;
        }
    </style>
</head>
<body>

<div class="c1">
    <div class="c2">  
        1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
    </div>
</div>

</body>
</html>


*{
保证金：0；
填充：0；
}
.c1{
背景：黄色；
宽度：800px；
}
.c2{
背景：蓝色；
利润率：50像素；
}
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

问题是，为什么页面的顶部或底部没有黄色条带？我认为它应该在c1的受控空间中，但背景色是不可见的。

因为页边折叠。将溢出：自动添加到c1规则中：

 .c1 {
     background: yellow;
     width: 800px;
     overflow:auto;
 }

这是保证金崩溃问题。在此实例中，为c1添加填充以获得所需效果。我已经回答了围绕保证金崩溃的更复杂问题，但这并不需要这样的措施。

将float:left设为C1，然后检查它。然后会有一条黄色的条纹。谢谢，很好的解决方案。