任务十一-inline-block·BFC·边距合并

1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

答：

• 情况一（兄弟元素垂直排列）：
  外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  例如：假设我们写了两个div,block1的margin设置为10px,而block2的margin设置为30px，2会排列在1的下面，但他们之间的距离是30px；

外边距合并示例图1

• 情况二（包含在父容器中）：
  当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

外边距合并示例图2

• 情况三（空元素）：
  空元素有外边距但是没有内边距和边框，他们上下外边距会碰到一起也会发生合并。

外边距合并示例图3

避免外边框合并我们可以在两个元素外边加border或者padding，或将它们添加浮动或设置成Inline-block的方式。如果是嵌套在父元素之下的时候可以在父元素上添加内边距或者overflow:hidden。

2.去除inline-block内缝隙有哪几种常见方法?

答：因为标签间的空格才导致出现元素间距，所以只要去掉html里的空格就会没有间距。

• 并排写标签（但是这样代码可读性很差）：

     
1
2
3
 ```
* 拆分写标签：

123```

• 使用font-size:0

.block {
    font-size: 0;
}
.block a {
    font-size: 12px;
}```
* 使用margin负值
![](http://upload-images.jianshu.io/upload_images/2349092-f308fdc96c1280ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/2349092-382863d4dd234daa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
答：当我们对元素设置左右浮动的时候，因为浮动元素脱离文档流，会造成父容器塌陷。overflow:hidden这个属性的作用是隐藏溢出，同时也有清除浮动的作用。比如写两个div，在Block1里面加上overflow:hidden的话不管下面2是多少的高度都会被隐藏掉，同时我们对2设置浮动效果，这个属性又会起到清除浮动的效果，当1没有设置高度的时候，2的高度就会自动撑开1.

.block1{
width:200px;
background:#000;
}
.block2{
float:left;
width:200px;
height:600px;
background:red;
} ```

4.BFC是什么？如何形成BFC，有什么作用?

答：

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

• float的值不为none。
• overflow的值不为visible。
• display的值为table-cell, table-caption, inline-block中的任何一个。
• position的值不为relative和static。

5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法?

答：我们都知道浮动元素的特点之一是会脱离文档流，所以父容器会感受不到浮动元素的存在，可以从两个维度上理解这个，假设元素被设置浮动那么从纬度1的层面是看不到浮动元素的存在，父容器在没有设置高度的情况下会自动塌陷。
解决方式：
1.对于浮动元素的父容器最后添加一个宽高为0,clear:both的div.
2.使用overflow:hidden;
3.使用after伪元素：给浮动元素的父容器添加一个clearfix的类，然后给这个类添加一个:after伪元素实现元素末尾添加一个看不见的块元素清除浮动。

6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

答：

.clearfix:after{    /*在clearfix类后面添加元素*/
    content: '';    /*空内容*/
    display: block;  /*块级元素*/
    clear: both;   /*清除浮动*/
}
.clearfix{
    *zoom: 1;   /*IE6/7通过，用来清除浮动、避免容器高度崩塌，可以触发hasLayout*/
}```
BFC是产生一个封闭的空间，不影响其他元素。而这种方式是添加clearfix类，元素内容为空，利用这个撑开父容器，但不是形成一个独立封闭空间这种。

***
****本文版权归饥人谷_鬼脚七和饥人谷所有，转载请注明来源。****