CSS背景颜色没有显示？

我做了两个类，其中一个是主要的，另一个是子div。在主div我给100％背景颜色的宽度：红色和子div我给宽度100％和背景蓝色和边缘顶部100px。但在浏览器中，红色不显示。如果我在主div中使用float，那么颜色出现在浏览器中，但主类已经具有100％的宽度，所以我们不应该给它浮动元素。CSS背景颜色没有显示？

<style> 

.main {width:100%; background-color:#FF0000} 

.child { width:100%; margin-top:100px; background:#0000FF} 

</style> 

</head> 

<body> 

<div class="main"> 
    <div class="child">asfda</div> 
</div>

来源

2012-03-17 Jitender Chand

看到小提琴：

小提琴：http://jsfiddle.net/uT7Vv/

演示：http://jsfiddle.net/uT7Vv/embedded/result/

来源

2012-03-17 16:26:02 w3uiguru

你的利润collapsing。

.main { 
    background-color: red; 
    padding-top: 100px; 
    width: 100%; 
} 

.child { 
    background-color: blue; 
    width: 100%; 
}

Here's a demo.

来源

2012-03-17 16:27:14 Ryan

但为什么出现此问题 – 2012-03-17 16:28:56

@JitenderChand：请参阅链接。 http://www.w3.org/TR/CSS2/box.html#collapsing-margins在某些情况下，相邻的边距会崩溃。 – Ryan 2012-03-17 16:35:46

你的孩子的div重叠在您的主要事业部

需要给主DIV。尝试这个

高度：您可以通过使用 padding代替父元素上解决这个问题

<style> 

.main {width:100%; background-color:#FF0000;height:50px;} 

.child { width:100%; margin-top:100px; background:#0000FF} 

</style> 

</head> 

<body> 

<div class="main"> 

<div class="child">asfda</div> 
</div>

来源

2016-01-08 08:47:13

CSS背景颜色没有显示？

回答

相关问题