1.在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例。
<li>外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。當兩個外邊距都是正數時，取兩者之中的較大者；當兩個外邊距都是負數時，取兩者之間絕對值較大者；當兩個外邊距一正一負時，取的是兩者的和。
<li>邊距合并出現的原因：
以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。
在元素之間為父子關系，兄弟關系時,相鄰的邊距就會合并，甚至，元素自身的邊距也會合并：
假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并：
父子邊距合并：
<head>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>```
outer和inner在此情況下同用一個外邊距。
<li>只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
<li>如果想要避免外邊距合并效果，可以采用“隔開”兩個元素的方式，在兩個元素間加邊框，或者采用在兩者間加一個元素，添加一個浮動效果等方法隔開兩個元素，當處于父子關系時，可以在外層元素加上padding來造成分隔效果，還有一種方式，使元素區塊形成BFC，同樣可以達到這種效果。
***
##2.去除inline-block內縫隙有哪幾種常見方法?
####inline-block是什么：
inline-block 即內聯塊,在CSS的元素分類中可以分成三種：行內元素或者內聯元素、塊級元素、以及內聯塊元素。
####內聯塊元素具有了內聯元素以及塊級元素的特性：
1.元素之間可以水平排列
1.可以當做一個塊級元素來設置各種的屬性，例如：width、height、padding等。
####inline-block兼容性
1.inline level的元素
對于內聯元素(inline element)，所有主流瀏覽器都支持直接設置display 的value值為inline-block來將其定義為內聯塊。
2.block level的元素
IE7及以下瀏覽器對塊級元素(block element)的支持并不完全，它們只支持用display:inline-block去定義一個inline level的元素為內聯塊。
####inline-block內縫隙：
例：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.demo span {
background-color: yellow;
}</style>
</head>
<body>
<div class="demo">
<span>我是例子</span>
<span>我是例子</span>
<span>我是例子</span>
<span>我是例子</span>
</div>
</body>
</html>```
<li>出現這種情況的原因是<span>標簽之間有換行，就會默認有一個空格，如果刪除這些換行，換一種寫法的話,，縫隙就會消失：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.demo span {
background-color: yellow;
}</style>
</head>
<body>
<div class="demo">
<span>我是例子</span
><span>我是例子</span
><span>我是例子</span
><span>我是例子</span>
</div>
</body>
</html>```
<li>或者使用負margin的方法（一般為-4px)，使用這種方式，第一個<span>也會向左移動-4px;的距離，這點需要注意:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.demo span {
background-color: yellow;
margin:-4px;
}
</style>
</head>
<body>
<div class="demo">
<span>我是例子</span>
<span>我是例子</span>
<span>我是例子</span>
<span>我是例子</span>
</div>
</body>
</html>```
<li>添加浮動清除縫隙：
<style>
.demo span {
background-color: yellow;
float: left;
}
</style>```
<li>在父元素中設置font-size為零，然后重新設置容器中的元素字號：
<style>
.demo {
font-size: 0;
}
.demo span {
background-color: yellow;
font-size: 20px;
}
</style>```
3.父容器使用overflow: auto| hidden撐開高度的原理是什么？
當元素設置浮動時，元素脫離了文檔流，父元素感受不到元素的存在，容器就會產生高度塌陷的效果，使用"overflow:auto|hiffen"形成一個BFC來撐開父元素。
4.BFC是什么？如何形成BFC，有什么作用?
BFC：Block Formatting Context，當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。
只要滿足下列任何一個條件，就會形成BFC:
<li>float的值不為 none
<li>position的值不為 static或者 relative
<li>display的值為 table-cell , table-caption, inline-block , flex, 或者 inline-flex中的其中一個
<li>overflow的值不為 visible
BFC的作用有以下幾個：
<li>防止外邊距合并
<li>清除浮動
<li>防止文字環繞
<li>設計頁面布局
5.以下代碼每一行的作用是什么？ 為什么會產生作用？ 和BFC撐開空間有什么區別？
.clearfix:after { /*在 clearfix:after 后添加一個元素 */
content: ''; /* 元素內容為 " " ,即為空元素 */
display: block; /* 將元素定義為塊元素 */
clear: both; /* 清除浮動 */
}
.clearfix {
*zoom: 1; /* “*”號是IE6~8的一個bug，IE6~8看到以“*”開頭的代碼，會忽略星號，執行后面的代碼。而zoom的原意是放大。它也會觸發BFC，在IE里面其實不叫BFC，叫hasLayout，只有IE中會識別這個代碼，此代碼的作用是兼容IE */
}```
這段代碼的作用是讓父元素感知到子元素的存在，從而撐開父元素。而BFC是形成一個獨立的不受影響的空間。
***
本文版權歸本人和饑人谷所有，轉載請注明來源。