1.什么是外邊距重疊?
? ? 外邊距重疊指的是绽昏,當(dāng)兩個(gè)垂直外邊距相遇時(shí),它們將形成一個(gè)外邊距俏脊。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的高度如果都是正邊界全谤,邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界爷贫,則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界认然。如果沒有正邊界补憾,則從零中減去絕對(duì)值最大的負(fù)邊界。只有外邊距才可以是負(fù)值卷员,內(nèi)邊距不允許為負(fù)值盈匾。
2.外邊距重疊的圖示:
? ? 當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí),第一個(gè)元素的底邊界與第二個(gè)元素的頂邊界發(fā)生合并毕骡。
? ?當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)(假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開)削饵,它們的頂和底邊界也發(fā)生合并:
? ? 假設(shè)有一個(gè)空元素,它有邊界未巫,但是沒有邊框或填充窿撬。在這種情況下,頂邊界與底邊界就碰到了一起叙凡,它們會(huì)發(fā)生疊加:
3.外邊距重疊的作用劈伴。
? ? 當(dāng)我們上下排列一系列規(guī)則的塊級(jí)元素時(shí),那么塊元素之間因?yàn)橥膺吘嘀丿B的存在握爷,段落之間就不會(huì)產(chǎn)生雙倍的距離跛璧,這樣各處距離就一致了。
4.外邊距不重疊的情況新啼。
? ? 水平margin永遠(yuǎn)不會(huì)重合
? ? 設(shè)置了overflow屬性(visible除外)的元素和它的子元素之間的margin不會(huì)重疊
? ? 設(shè)置了絕對(duì)定位(position:absolute)的盒模型赡模,垂直margin不會(huì)被重疊,和子元素之間也不重疊
? ? 設(shè)置了display:inline-block的元素师抄,垂直margin不會(huì)重疊漓柑,和子元素之間也不重疊
? ? 根元素(如html)與body的margin不會(huì)重疊
5.防止外邊距重疊的方法。
? ? 元素絕對(duì)定位postion:absolute;一般用在內(nèi)層元素
? ? 內(nèi)層元素 加float:left;或display:inline-block;
? ? 外層元素用padding增加邊距
? ? 外層元素設(shè)置overflow:hidden;
? ? 內(nèi)層元素透明邊框border:1px solid transparent;
6.參考文獻(xiàn)