大家在制作網(wǎng)頁的過程中有時會遇到div嵌套引起的margin-top不起作用，對內(nèi)部的div設(shè)置margin-top時，內(nèi)部對于外部的div并沒有產(chǎn)生一個margin值，而是外部的div相對于上面的div產(chǎn)生了一個margin值，為什么會出現(xiàn)這種情況？？
這是因為嵌套div中margin-top出現(xiàn)轉(zhuǎn)移，在部分瀏覽器中，兩個嵌套的div，如果外層父元素div的padding值為0，那么內(nèi)層div的margin-top，margin-bottom值都會轉(zhuǎn)移到父元素也就是外層div身上。
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.div1 {
height: 500px;
width: 100%;
background: #ccc;
}
.div2 {
height: 100px;
width: 100px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>由代碼可看出，div1嵌套div2，對div2設(shè)置margin-top是100px；
解決辦法：
1. 給父元素div1設(shè)置一個padding值
.div1{ height: 500px; width: 100%; background: #ccc; padding-top: 1px; } 
2. 給父元素div1設(shè)置一個overflow：hidden；在不加overflow:Hidden;的時候，margin-top:這個屬性是認(rèn)不到邊的，也就是失效。但是ie瀏覽器解決了這個問題，火狐、谷歌之類的就會出現(xiàn)失效，所以這是個標(biāo)準(zhǔn)問題，也是個兼容問題。
.div1{ height: 500px; width: 100%; background: #ccc; overflow: hidden; }