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

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

  1. 两个块级元素上下外边距相邻，上下两个元素中间为最大一方的外边距。1号的下边距会和2号上边距合并

     
     
     

     Paste_Image.png

  2. 当父元素没有设置边框或padding属性，或父元素没有形成BFC的话，父子元素合并边距。

     
     
     

     Paste_Image.png
     
     
     

     Paste_Image.png

  如果不想合并，可以给两个元素加上边界，比如边框，padding，或者使用Inline-block,float。

  如何合并：
  margin值为都为正值时取最大值。
  margin值为都为负数取绝对值最大值。
  margin值一个为正数一个为负数取两者的和。

• 去除inline-block内缝隙有哪几种常见方法?
  答：

  1. 把元素写在一行，即没有空行。元素多可能不好整理！

     
     
     

     Paste_Image.png

  2. margin-left: -4px; 一般-4px。
     

     

     Paste_Image.png

  3. 浮动，需要在父容器内加上，overflow:auto;
     

     

     Paste_Image.png

  4. 父容器font-size:0;
     

     

     Paste_Image.png

• 父容器使用overflow: auto| hidden撑开高度的原理是什么？
  答：使用overfl:auto或hidden会形成BFC，在BFC中，，浮动元素一样是参与计算的，所以就撑开了高度。相当于清除浮动。

• BFC是什么？如何形成BFC，有什么作用?
  答：

  • BFC:BFC既Block Formatting Context，他能提供一个环境，使元素在这个环境中按照一定规则进行布局。这个环境中的元素不会影响到其它环境中的布局，也不会受其他元素的影响。
  • 如何形成：display:inline-block | table-cell | table-caption;、overflow:hidden | auto;、float不为none;均可形成BFC 。
  • BFC作用：清除浮动元素对外部元素的影响、阻止元素外边距合并。

• 浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法。
  答：
  浮动元素会脱离文档流，父元素不知他的存在。所以就出现塌陷。
  解决方法：

  1. 内部行程BFC。
  2. 清除浮动。
  3. 设置zoom：1; (该方法是为了兼容ie6、7)

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

.clearfix:after{ /设置伪类/
content:""; /内容为空/
display: block; /成为块级元素/
clear: both; /清除两侧浮动/
}
.clearfix{ /class选择器/
zoom: 1; /兼容 ie6,7*/
}

作用：清除浮动元素。
产生作用：父元素的高度是由它里面所有的文档流的高度决定，而这个空的元素左右都不能有浮动元素，clear属性只能影响使用清除的元素本身，不能影响其他元素，所以这个空元素就会在在浮动元素下方，最后父元素要包住这个空元素，只能被撑开。
区别：BFC是创建了一个独立的空间，在计算高度时将浮动元素一起计算进去，伪元素清除浮动是给父元素内添加一个空元素而撑开父容器。