1.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例？

• 1.當(dāng)兩個垂直元素外邊距相遇時就會出現(xiàn)外邊距合并;合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。一正一負(fù)，取和;都為負(fù)數(shù)，則取負(fù)數(shù)絕對值的最大值。

  • 父元素與子元素的外邊距合并，如下圖:

    
    
    
    

    父元素的上外邊距為20px,子元素的上外邊距為40px,最后綠色區(qū)域距上外邊距是40px;

  • 兄弟元素的外邊距合并,如下圖:

    
    
    
    

    如上圖藍(lán)色區(qū)域的上下外邊距是40px,黃色區(qū)域的上外邊距是40px,最后這兩塊間的距離合并為40px。

  • 元素自身的外邊距合并，如下圖:

    
    
    
    

    3塊是空元素，它有外邊距，但是沒有邊框或填充,所以它跟上下兩個兄弟元素外邊距合并了。

• 2.如何合并:

  • 兩個相鄰的外邊距都是正數(shù)時，合并取它們兩者之間較大的值。
  • 兩個相鄰的外邊距都是負(fù)數(shù)時，合并取兩者絕對值的較大值。
  • 兩個外邊距一正一負(fù)時，合并取兩者相加的和。

• 3.如何不讓相鄰元素外邊距合并?
  不合并可以使用inline-block，float，overflow形成BFC，相鄰就不合并了,如下所示:

  • 使用浮動，如下圖所示:

    
    
    
    

    浮動元素不與任何元素產(chǎn)生外邊距合并.

  • 使用display:inline-block,如下圖所示:

    
    

  • 使用overflow:hidden,如下圖所示:

    
    
    
    

    給子元素加了父元素div之后，利用overflow:hidden，外邊距不合并，可見父元素創(chuàng)建BFC與子元素的外邊距不發(fā)生合并，同時兩個父元素內(nèi)的子元素也不發(fā)生合并。

  • 使用絕對定位的元素，不與任何元素發(fā)生外邊距合并,如下圖所示:

    
    

綜上所述:兩個元素外邊距會不會合并主要看它們外邊距之間有沒有分界線存在。要想讓兩個元素的外邊距不合并，就要讓它們之間有道分界線，這個分界線可以是border，padding或者是BFC形成的獨(dú)立空間。

2.去除inline-block內(nèi)縫隙有哪幾種常見方法?

• 如下圖所示:

  
  
  
  

  去除的方法有四種:

  • 1.去除標(biāo)簽之間的空格（即不換行or拆開標(biāo)簽）
  • 2.使用負(fù)margin
  • 3.使用float
  • 4.父容器設(shè)置font-size=0

  如下圖所示:

  
  

3.父容器使用overflow: auto| hidden撐開高度的原理是什么？

• 父容器使用overflow: auto| hidden時可以創(chuàng)建BFC修復(fù)高度坍塌，清除浮動。例如子容器設(shè)置高度大于父容器時，父容器會自動撐開。此時overflow:hidden會清除子容器浮動，子容器超出高度部分會自動隱藏;

4.BFC是什么？如何形成BFC，有什么作用?

• BFC的概念：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。
  在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊。
  首先BFC是一個名詞，是一個獨(dú)立的布局環(huán)境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉(zhuǎn)換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）

• 如何形成BFC？

  • 用float屬性（none值除外）；
  • 用絕對定位absolute；
  • overflow（visible值除外）；
  • display屬性為table-cell, table-caption, inline-block, flex, 或者inline-flex;

• 作用:

  • ①清除浮動
  • ②防止外邊距合并
  • ③用于布局，比如兩欄布局
  • ④清除文字環(huán)繞

5.浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生？有幾種解決方法？

• 如下圖所示:

浮動導(dǎo)致的父容器高度塌陷指當(dāng)父元素不設(shè)置高度的時候，子元素設(shè)置浮動之后，它脫離當(dāng)前文檔流，所以它無法撐開其父元素，造成父元素高度塌陷。

• 有兩種解決辦法:

  • 1.給父元素添加display: inline-block; overflow: auto; 或 overflow: hidden;樣式，使父容器形成BFC空間。
    

    圖1:
  圖2:
  圖3:

• 2.利用:after偽類元素?fù)伍_。

6.以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？

• 這段代碼總的作用就是利用after偽類來創(chuàng)建一個虛擬空塊元素，再利用clear屬性清除浮動。
• 區(qū)別: 這個方法是使用內(nèi)容將父容器撐開,而BFC是形成一個內(nèi)部的獨(dú)立小空間來包容浮動元素，不受外部元素影響。