任务11-inline-block、BFC、边距合并

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

概念：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为合并，并且因而所结合成的外边距称为合并外边距。

父子元素的外边距合并的问题及解决方案
当父元素不设置border而子元素设置margin时，父子元素的外边距会产生合并。
例子：如绿色方块不设置border且设置margin:10px,粉色方块设置margin:10px,产生父子外边距合并。

Paste_Image.png

解决方案：在父元素中添加border或padding
兄弟元素的外边距合并的问题及解决方案
当相邻的兄弟元素在同一个父容器下均设置margin时，会产生外边距合并，并且margin值为二者的较大值。
例子：如2个粉色方块分别设置的margin为10px和20px，但2个粉色方块交接出的margin为20px而不是30px，从而产生外边距合并。

Paste_Image.png

解决方案：使用float/（display:inline-block）/（为相邻的子元素生产BFC）
注意：使用display时要注意child-3的margin-top会发生不规则偏移

    display:inline-block;
    /*使用display时要注意child-3的margin-top会发生不规则偏移 */
}
<div class="box">
        <div class="child child-3"></div>
        <div class="child child-4"></div>
    </div>

Paste_Image.png

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

概念：使用inline-block，会产生跟加了<span>效果一样默认的间隙

Paste_Image.png

解决办法：

将display为inline-block的元素放置在一行，此方法不适用与包含较多内容的元素
li>html</li><li>css</li><li>javascript</li>
使用浮动
使用负边距

li {
  display:inline-block;
  margin-left:-4px;
}
li:first-child {
  margin:0;
}

3. 父容器使用overflow: auto| hidden撑开高度的原理是什么？

父容器在使用overflow: auto| hidden后使其产生BFC，这个新的BFC是一个独立的布局环境，不受外界影响，也不会影响外界度。

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

1. BFC是什么？

BFC本质上就是是一个元素为其内部新生成的独立空间，内部的内容全被格式化成块级容器(注意是块级容器，不是块级元素)
既然内部的内容全部为块级容器，自然按照块级容器的排版方式——可设置宽高并且从左到右排列
由于相邻的子元素同处一个空间，margin会产生合并
最后，即使是浮动元素在父容器建立的BFC内部也得老老实实地按照块级容器排版，不能搞特殊

2. 如何形成BFC？

根据w3c的定义：

浮动元素、绝对定位元素、非块级元素的块级容器（如inline-block,table-cells,table-captions）和overflow值不为visible的块级元素，这些元素都会为它们的内容建立BFC。

触发方式：

float属性不为none
position属性不为static或relative
display属性为table-cell, table-caption, inline-block, flex, 或者inline-flex
overflow属性不为visible

3. BFC的作用?

清除浮动
清除外边距合并

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

父容器的高度若为自适应，子元素浮动后会产生父元素的高度塌陷
解释：浮动元素脱离文档流导致其内容消失在父容器中，由于父容器高度为自适应，即其高度全靠子元素内容撑开，子元素消失而父容器高度自然塌陷
解决方案：

父容器形成BFC

.box {
  width:300px;
  /* float:left; */

  /* position:absolute; */

  /* display:inline-block; */
  /* display:table-cell; */
  /* display:table-caption; */

  overflow:hidden;    /* <<<<<<<最常用 */
  /* overflow:auto; */
}

利用清除浮动属性
这里思想是在父容器中添加伪元素：after或：before（视具体情况而定），添加一个空元素

.box:after {
  content:"";
  display:block;
  clear:both;
}

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

.clearfix:after {
 content: ''; 
 display: block; 
 clear: both;
}

.clearfix {
 *zoom: 1;
}

该段代码起到清除浮动的作用，与通过父容器建立BFC的原理不同，它使用clear属性去清除浮动,上述方法可以在父容器的最后添加一个内容为空存在与文档流中并且清除左右浮动的元素。父容器将会感知到这个空元素并且把自身空间撑开。
*zoom=1的解释：
一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题
zoom来兼容IE浏览器以清除浮动或外边距合并、以及触发IE浏览器的haslayout
*zoom是针对IE6/7，本代码中*zoom:1是说明清除IE6/7浏览器中元素的浮动