首頁歷史 > 正文

28、什麼是外邊距重疊,重疊的結果是什麼?(必會)

2022-01-23由 池梓沐 發表于 歷史

外邊距重疊

外邊距重疊指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的高度如果都是正邊界,邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界,則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界,則從零中減去絕對值最大的負邊界。只有外邊距才可以是負值,內邊距不允許為負值在 CSS 中,相鄰的兩個盒子的外邊距可以結合成一個單獨的外邊距,這種合併外邊距的方式被稱為摺疊,並且因而所結合成的外邊距稱為摺疊外邊距。

重疊情況

1、兩個相鄰的外邊距都是正數時,摺疊的結果是它們兩者之間較大的值

2、兩個相鄰的外邊距都是負數時,摺疊結果是兩者絕對值得較大值

3、兩個外邊距一正一負時,摺疊結果是兩者的相加的和

4、外邊距不重疊的情況

水平 margin 永遠不會重合

設定了 overflow 屬性(visible 除外)的元素和它的子元素之間的 margin 不會重疊

設定了絕對定位( ——tt-darkmode-color: #9E9ECD;“>設定了 display:inline-block 的元素,垂直 margin 不會重疊,和子元素之間也不會重疊

根元素(如 html)與 body 的 margin 不會重疊

5、防止外邊距重疊的方法

元素絕對定位 postion:absolute;一般用在內層元素

內層元素 加 float:left;或 display:inline-block;

外層元素用 padding 增加邊距

外層元素設定 overflow:hidden;

內層元素透明邊框 border:1px solid transparent;

頂部