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是形成一个独立的不受影响的空间。
***
本文版权归本人和饥人谷所有，转载请注明来源。