一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
块元素的top与bottom外边距某些情况下会合并，两个外边距合并成单个外边距，外边距大的一方将会覆盖外边距小的一方。
- 第一种情况：相邻元素
当一个元素出现在另一个元素上面时，第一个元素的下外边距（bottom）与第二个的上外边距（top）合并。
Paste_Image.png
- 第二种情况：父子元素
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
Paste_Image.png
- 第三种情况：空元素（自身外边距合并）
它有外边距，但是没有边框或填充。在这种情况下，上外边距就和下外边距合并到了一起。
Paste_Image.png
- 如何合并：
1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
上面的举例都为正数时。
2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
Paste_Image.png
3.两个外边距一正一负时，折叠结果是两者的相加的和。
Paste_Image.png
- 如何不让相邻元素外边距合并？
1.父子元素，给父元素加上padding或者border。
Paste_Image.png
2.BFC
overflow属性的元素和它的子元素之间的margin之间的外边距不会发生合并
Paste_Image.png
Paste_Image.png
另外：
1.外边距合并只发生在垂直方向上，水平方向上是不会发生外边距合并的。
2.行内框、浮动框、绝对定位、display:inline-block的外边距不会发生合并。
二、去除inline-block内缝隙有哪几种常见方法?
有内缝隙的时候是这样子的：
Paste_Image.png
方法一：去除html内的空格
因为空格也属于一个字符串，也是占位置的。
Paste_Image.png
也可以这样写：
Paste_Image.png
方法二：负边距（不过第一个元素会溢出，需要单独设置）
Paste_Image.png
方法三：浮动（需要对父元素设置BfC，否则会塌陷）
Paste_Image.png
方法四：父元素设置font-size：0px（子元素要重置回来）
Paste_Image.png
三、父容器使用overflow: auto| hidden撑开高度的原理是什么？
关于overflow：
overflow 属性规定当内容溢出元素框时发生的事情。
Paste_Image.png
原理是：当元素浮动时，父元素感知不到浮动元素的存在，而且又没有设置height，就会造成塌陷。
使用overflow: auto| hidden可以形成一个独立的不受外界影响的空间——bfc。浮动元素也被包含在内，所以高度自然被撑开。
四、BFC是什么？如何形成BFC，有什么作用?
BFC全称为block formatting context，翻译过来就是块级格式化上下文。
通俗的理解是bfc会形成一个独立的，内部元素不受外界干扰的空间。
-
以下情况可以形成bfc：
1.float的值不为none
2.overflow的值不为visible
3.display的值为inline-block、table-cell、table-caption
4.position的值为absolute或fixed -
作用：
1.撑开父元素
2.清除浮动
3.防止外边距合并
五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
浮动元素脱离了文档流，父容器感知不到它的存在，觉得里面什么东西都没有，而且父容器本身又没有设置高度，没有任何东西支撑，所以会高度塌陷。
此为父容器高度塌陷：
Paste_Image.png
解决方法：
1.bfc。使父容器形成bfc，包含住浮动元素。
Paste_Image.png
2.使父容器 float或display:inline-block；（父容器宽度会收缩，影响布局。）
3.在父容器中添加高度；
4.新建一个html空标签，并设置清除浮动clear:both;
5.使用伪类：after
Paste_Image.png
六、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{/*在clearfix后面添加元素*/
content: '';/*这里元素的文本内容为空*/
display: block;/*设置为块级元素*/
clear: both;/*不允许有浮动*/
}
.clearfix{
*zoom: 1;/*为了兼容ie*/
}
因为伪元素在IE8是部分支持，IE8以下不支持，所以*zoom: 1是为了在IE中到达清除浮动的效果。
bfc是一个独立的空间，不受外界元素干扰；而伪类是清楚浮动，让父容器感知元素的存在，从而撑开高度。
网友评论