在設(shè)置子DIV的margin-top時(shí)候，如果與父DIV之間無任何元素的間隔，那么就會(huì)讓父DIV的位置收到影響。如圖：
代碼如下：
<style>
.zb-tips{ margin-top: 30%; }
</style>
<div class="zb-container">
<div class="ui-tips ui-tips-warn zb-tips">
<i></i><span>簽到失��！請(qǐng)下載并安裝“xxx”APP掃描二維碼</span>
</div>
</div>
原因是：所有毗鄰的兩個(gè)或更多盒元素的margin將會(huì)合并為一個(gè)margin共享之。毗鄰的定義為：同級(jí)或者嵌套的盒元素，并且它們之間沒有非空內(nèi)容、Padding或Border分隔。這個(gè)問題的避免方法很多，只要破壞它出現(xiàn)的條件就行。給 Outer Div 加上 padding/border，或者給 Outer Div / Inner Div 設(shè)置為 float/position:absolute(CSS2.1規(guī)定浮動(dòng)元素和絕對(duì)定位元素不參與Margin折疊)。
如何解決這個(gè)問題呢？方法有多個(gè)：
方法1：在父DIV的css加上“overflow:hidden;”。這種方法是目前來看最完美的解決辦法。
方法2：在父DIV的css加上“border:1px solid transparent;”。
方法3：在父DIV的css加上float或者position:absolute。
方法4：在父DIV的css加上padding-top來代替margin實(shí)現(xiàn)效果。