1、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
CSS 外边距合并实例 1
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
CSS 外边距合并实例 2
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
CSS 外边距合并实例 3
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
CSS 外边距合并实例 4
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
如何不让相邻元素外边距合并
相邻的盒模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。
设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。
设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
根元素的垂直margin不会被折叠
范例
QQ截图20160823064145.jpg
2、去除inline-block内缝隙有哪几种常见方法?
有缝隙
QQ截图20160823065428.jpg
方法一:标签无空格
QQ截图20160823065428.jpg
QQ截图20160823065632.jpg
方法二:负margin
QQ截图20160823065914.jpg
方法三:浮动
QQ截图20160823071350.jpg
方法四:利用父元素设置font-size:0;然后再给子元素把font-size设置回来
QQ截图20160823071538.jpg
3、父容器使用overflow: auto| hidden撑开高度的原理是什么？
overflow: auto| hidden会触发BFC属性，BFC为它的内容开辟了新的摆放空间，这个摆放空间是相对独立的，它会把浮动元素的高度也计算在内，所以高度就撑开了。
4、BFC是什么？如何形成BFC，有什么作用?
BFC的概念：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）如何形成BFC：
用float属性（none值除外）；
用绝对定位absolute；
overflow（visible值除外）；
display属性为table-cell, table-caption, inline-block, flex, 或者inline-flex
作用
撑开父元素
阻止外边距合并
清除浮动的文字环绕影响或位置影响
5、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
高度塌陷是指，子元素设置浮动后，就脱离了文档流，父元素就感知不到浮动元素的存在，浮动元素会溢出父元素，而父容器就会高度塌陷。
QQ截图20160823080707.jpg
空元素设置clear属性
QQ截图20160823080844.jpg
使用css伪类::after
QQ截图20160823081007.jpg
为其父元素创建一个BFC。
6、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{ content: ''; /与伪类元素配合使用，内容为空/
display: block; /表现为块级元素，如果不表现，行内元素不会撑开父元素/ clear: both;/清除两边浮动/
}
.clearfix{ zoom: 1;/IE专有属性，缩放比例，也可用于检查BUG，参数设为1的话，多用于清除浮动/}
区别：BFC是形成一个内部的独立小空间，不受外部元素影响。而上述方法只是让父元素感知到浮动元素的存在，把内容撑开，不会形成独立的空间。
网友评论