1.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
答：
- 情況一（兄弟元素垂直排列）：
外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
例如：假設(shè)我們寫了兩個div,block1的margin設(shè)置為10px,而block2的margin設(shè)置為30px，2會排列在1的下面，但他們之間的距離是30px；
外邊距合并示例圖1
- 情況二（包含在父容器中）：
當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。
外邊距合并示例圖2
- 情況三（空元素）：
空元素有外邊距但是沒有內(nèi)邊距和邊框，他們上下外邊距會碰到一起也會發(fā)生合并。
避免外邊框合并我們可以在兩個元素外邊加border或者padding，或?qū)⑺鼈兲砑痈踊蛟O(shè)置成Inline-block的方式。如果是嵌套在父元素之下的時候可以在父元素上添加內(nèi)邊距或者overflow:hidden。
2.去除inline-block內(nèi)縫隙有哪幾種常見方法?
答：因為標(biāo)簽間的空格才導(dǎo)致出現(xiàn)元素間距，所以只要去掉html里的空格就會沒有間距。
- 并排寫標(biāo)簽（但是這樣代碼可讀性很差）：
<ul>
<li>1</li><li>2</li><li>3</li>
</ul> ```
* 拆分寫標(biāo)簽：
<a href="##">1</a
><a href="##">2</a
><a href="##">3</a>```
- 使用font-size:0
.block {
font-size: 0;
}
.block a {
font-size: 12px;
}```
* 使用margin負值
####3.父容器使用overflow: auto| hidden撐開高度的原理是什么？
答：當(dāng)我們對元素設(shè)置左右浮動的時候，因為浮動元素脫離文檔流，會造成父容器塌陷。overflow:hidden這個屬性的作用是隱藏溢出，同時也有清除浮動的作用。比如寫兩個div，在Block1里面加上overflow:hidden的話不管下面2是多少的高度都會被隱藏掉，同時我們對2設(shè)置浮動效果，這個屬性又會起到清除浮動的效果，當(dāng)1沒有設(shè)置高度的時候，2的高度就會自動撐開1.
.block1{
width:200px;
background:#000;
}
.block2{
float:left;
width:200px;
height:600px;
background:red;
} ```
4.BFC是什么？如何形成BFC，有什么作用?
答：
BFC就是“塊級格式化上下文”的意思，創(chuàng)建了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與創(chuàng)建BFC， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個獨立盒子里的布局不受外部影響，當(dāng)然它也不會影響到外面的元素。
可以把一個頁面想象成大的集裝箱，這個集裝箱里裝的貨物就是HTML元素。在現(xiàn)實生活中為了避免不同人的貨物相互混淆，都是把貨物打好包裝再裝入集裝箱，這樣的話無論你包裝里面的貨物怎么擺放，都不會影響到其他人的貨物。那么這個包裝就可以被想象成Block Formatting Context。
- float的值不為none。
- overflow的值不為visible。
- display的值為table-cell, table-caption, inline-block中的任何一個。
- position的值不為relative和static。
5.浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生？有幾種解決方法?
答：我們都知道浮動元素的特點之一是會脫離文檔流，所以父容器會感受不到浮動元素的存在，可以從兩個維度上理解這個，假設(shè)元素被設(shè)置浮動那么從緯度1的層面是看不到浮動元素的存在，父容器在沒有設(shè)置高度的情況下會自動塌陷。
解決方式：
1.對于浮動元素的父容器最后添加一個寬高為0,clear:both的div.
2.使用overflow:hidden;
3.使用after偽元素：給浮動元素的父容器添加一個clearfix的類，然后給這個類添加一個:after偽元素實現(xiàn)元素末尾添加一個看不見的塊元素清除浮動。
6.以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？
答：
.clearfix:after{ /*在clearfix類后面添加元素*/
content: ''; /*空內(nèi)容*/
display: block; /*塊級元素*/
clear: both; /*清除浮動*/
}
.clearfix{
*zoom: 1; /*IE6/7通過，用來清除浮動、避免容器高度崩塌，可以觸發(fā)hasLayout*/
}```
BFC是產(chǎn)生一個封閉的空間，不影響其他元素。而這種方式是添加clearfix類，元素內(nèi)容為空，利用這個撐開父容器，但不是形成一個獨立封閉空間這種。
***
****本文版權(quán)歸饑人谷_鬼腳七和饑人谷所有，轉(zhuǎn)載請注明來源。****