1. 在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
概念：在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為合并，并且因而所結(jié)合成的外邊距稱為合并外邊距。
- 父子元素的外邊距合并的問題及解決方案
當(dāng)父元素不設(shè)置border而子元素設(shè)置margin時(shí)，父子元素的外邊距會(huì)產(chǎn)生合并。
例子：如綠色方塊不設(shè)置border且設(shè)置margin:10px,粉色方塊設(shè)置margin:10px,產(chǎn)生父子外邊距合并。
Paste_Image.png
解決方案：在父元素中添加border或padding - 兄弟元素的外邊距合并的問題及解決方案
當(dāng)相鄰的兄弟元素在同一個(gè)父容器下均設(shè)置margin時(shí)，會(huì)產(chǎn)生外邊距合并，并且margin值為二者的較大值。
例子：如2個(gè)粉色方塊分別設(shè)置的margin為10px和20px，但2個(gè)粉色方塊交接出的margin為20px而不是30px，從而產(chǎn)生外邊距合并。
Paste_Image.png
解決方案：使用float/（display:inline-block）/（為相鄰的子元素生產(chǎn)BFC）
注意：使用display時(shí)要注意child-3的margin-top會(huì)發(fā)生不規(guī)則偏移
display:inline-block;
/*使用display時(shí)要注意child-3的margin-top會(huì)發(fā)生不規(guī)則偏移 */
}
<div class="box">
<div class="child child-3"></div>
<div class="child child-4"></div>
</div>
Paste_Image.png
2. 去除inline-block內(nèi)縫隙有哪幾種常見方法?
概念：使用inline-block，會(huì)產(chǎn)生跟加了<span>效果一樣默認(rèn)的間隙
Paste_Image.png
解決辦法：
- 將display為inline-block的元素放置在一行，此方法不適用與包含較多內(nèi)容的元素
li>html</li><li>css</li><li>javascript</li> - 使用浮動(dòng)
- 使用負(fù)邊距
li {
display:inline-block;
margin-left:-4px;
}
li:first-child {
margin:0;
}
3. 父容器使用overflow: auto| hidden撐開高度的原理是什么？
父容器在使用overflow: auto| hidden后使其產(chǎn)生BFC，這個(gè)新的BFC是一個(gè)獨(dú)立的布局環(huán)境，不受外界影響，也不會(huì)影響外界度。
4. BFC是什么？如何形成BFC，有什么作用?
1. BFC是什么？
- BFC本質(zhì)上就是是一個(gè)元素為其內(nèi)部新生成的獨(dú)立空間，內(nèi)部的內(nèi)容全 被格式化成塊級(jí)容器(注意是塊級(jí)容器，不是塊級(jí)元素)
- 既然內(nèi)部的內(nèi)容全部為塊級(jí)容器，自然按照塊級(jí)容器的排版方式——可設(shè)置寬高并且從左到右排列
- 由于相鄰的子元素同處一個(gè)空間，margin會(huì)產(chǎn)生合并
- 最后，即使是浮動(dòng)元素在父容器建立的BFC內(nèi)部也得老老實(shí)實(shí)地按照塊級(jí)容器排版，不能搞特殊
2. 如何形成BFC？
根據(jù)w3c的定義：
浮動(dòng)元素、絕對定位元素、非塊級(jí)元素的塊級(jí)容器（如inline-block,table-cells,table-captions）和overflow值不為visible的塊級(jí)元素，這些元素都會(huì)為它們的內(nèi)容建立BFC。
觸發(fā)方式：
- float屬性不為none
- position屬性不為static或relative
- display屬性為table-cell, table-caption, inline-block, flex, 或者inline-flex
- overflow屬性不為visible
3. BFC的作用?
- 清除浮動(dòng)
- 清除外邊距合并
5. 浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生？有幾種解決方法?
父容器的高度若為自適應(yīng)，子元素浮動(dòng)后會(huì)產(chǎn)生父元素的高度塌陷
解釋：浮動(dòng)元素脫離文檔流導(dǎo)致其內(nèi)容消失在父容器中，由于父容器高度為自適應(yīng)，即其高度全靠子元素內(nèi)容撐開，子元素消失而父容器高度自然塌陷
解決方案：
- 父容器形成BFC
.box {
width:300px;
/* float:left; */
/* position:absolute; */
/* display:inline-block; */
/* display:table-cell; */
/* display:table-caption; */
overflow:hidden; /* <<<<<<<最常用 */
/* overflow:auto; */
}
- 利用清除浮動(dòng)屬性
這里思想是在父容器中添加偽元素：after或：before（視具體情況而定），添加一個(gè)空元素
.box:after {
content:"";
display:block;
clear:both;
}
6. 以下代碼每一行的作用是什么？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
- 該段代碼起到清除浮動(dòng)的作用，與通過父容器建立BFC的原理不同，它使用clear屬性去清除浮動(dòng),上述方法可以在父容器的最后添加一個(gè)內(nèi)容為空存在與文檔流中并且清除左右浮動(dòng)的元素。父容器將會(huì)感知到這個(gè)空元素并且把自身空間撐開。
-
*zoom=1的解釋：
一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)生重新渲染，運(yùn)用這個(gè)原理，也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問題
zoom來兼容IE瀏覽器以清除浮動(dòng)或外邊距合并、以及觸發(fā)IE瀏覽器的haslayout
*zoom是針對IE6/7，本代碼中*zoom:1是說明清除IE6/7瀏覽器中元素的浮動(dòng)
