邊界疊加是一個(gè)相當(dāng)簡(jiǎn)單的概念。但是，在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí)，它會(huì)造成許多混淆。簡(jiǎn)單地說(shuō)，當(dāng)兩個(gè)垂直邊界相遇是，它們將形成一個(gè)邊界，這個(gè)邊界的高度等于兩個(gè)邊界高度中的較大者。
例如：我們?cè)诰W(wǎng)頁(yè)里加入兩個(gè)層
兩個(gè)層都設(shè)置為100寬 100高。第一個(gè)層背景色為紅色，下邊界（margin-bottom）為20 px.。第一個(gè)層背景色為黃色，上邊界（margin-top）為30 px.。那么這兩個(gè)層之間的距離是不是20+30=50px呢？其實(shí)不然，他們之間的距離應(yīng)是他們邊界中最大一個(gè)值，也就是30px。效果如圖：
另外，當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)，它們的頂或底邊界也發(fā)生疊加。比如：我們把層b放在a層內(nèi)。
即<div id="a"><div id="b"></div></div>。然后為他們添加樣式。
我們把a(bǔ)層設(shè)置為200*200大小，并為他添加上邊界（margin-top:20px）為20px。B層樣式不改變，上邊界為30px。那么，這里b層距離瀏覽器是不是20+30=50px呢？答案肯定不是。因?yàn)榘l(fā)生了邊界疊加，因此b層距離瀏覽器的距離仍然30px即（20px 30px 中最大的）。那么，a層距離瀏覽器的距離是20px嗎？不是，而是30px.(也是邊界中最大的一個(gè))。所以，此時(shí)a b層距離瀏覽器的距離都是30px。 效果如圖（火狐）
這就是所謂的邊界疊加。但在IE里面支持的不夠好，大家可以比較火狐和IE的效果差異。
注意：
1、只有普通文檔流中的垂直邊界才會(huì)疊加。浮動(dòng)、絕對(duì)定位不會(huì)疊加
2、只有元素沒(méi)有設(shè)置的padding border時(shí)，才發(fā)生邊界疊加。
3、只有垂直邊界才會(huì)發(fā)生疊加，水平邊界不疊加。
如何消除邊界疊加:
邊界疊加的大多數(shù)問(wèn)題可以通過(guò)添加透明邊框或1px的補(bǔ)白來(lái)修復(fù)。
1.外層 padding
2.透明邊框 border:1px solid transparent;
3.絕對(duì)定位 postion:absolute:
4.外層DIV overflow:hidden;
5.內(nèi)層DIV 加float:left; display:inline;
6.外層DIV有時(shí)會(huì)用到zoom:1;
您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。
蘇公網(wǎng)安備 32070502010230號(hào)