大家在制作網(wǎng)頁(yè)的過(guò)程中有時(shí)會(huì)遇到div嵌套引起的margin-top不起作用，對(duì)內(nèi)部的div設(shè)置margin-top時(shí)，內(nèi)部對(duì)于外部的div并沒(méi)有產(chǎn)生一個(gè)margin值，而是外部的div相對(duì)于上面的div產(chǎn)生了一個(gè)margin值，為什么會(huì)出現(xiàn)這種情況？？
這是因?yàn)榍短譫iv中margin-top出現(xiàn)轉(zhuǎn)移，在部分瀏覽器中，兩個(gè)嵌套的div，如果外層父元素div的padding值為0，那么內(nèi)層div的margin-top，margin-bottom值都會(huì)轉(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，對(duì)div2設(shè)置margin-top是100px；
解決辦法：
1. 給父元素div1設(shè)置一個(gè)padding值
.div1{ height: 500px; width: 100%; background: #ccc; padding-top: 1px; } 
2. 給父元素div1設(shè)置一個(gè)overflow：hidden；在不加overflow:Hidden;的時(shí)候，margin-top:這個(gè)屬性是認(rèn)不到邊的，也就是失效。但是ie瀏覽器解決了這個(gè)問(wèn)題，火狐、谷歌之類的就會(huì)出現(xiàn)失效，所以這是個(gè)標(biāo)準(zhǔn)問(wèn)題，也是個(gè)兼容問(wèn)題。
.div1{ height: 500px; width: 100%; background: #ccc; overflow: hidden; }