日夜谈——CSS inline-block、BFC以及外边距合并

task11.png

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

定义：简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并场景：
一：兄弟元素的外边距合并;
For example：

上下元素外边距合并.png

二：父子元素外边距合并;
For example:

父子元素外边距合并.png

如图：负元素上边距与item1上边距合并margin:30px，下边距与item2下边距合并margin:10px;。

解决方案：
一：兄弟元素的外边距合并;

使用float;

For example:

利用float.png

使用inline-block;

For example:

利用inline-block.png

为相邻的子元素生成bfc

For example:

bfc.png

二父子元素的外边距合并的解决方案

可以在父元素上设置border或者padding;

For example:

设置border.png

设置padding.png

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

inline-block有内缝隙是这样的：

inline-block缝隙.png

解决方法：

• 设置负边距

负边距去除缝隙.png
• 在父元素里设置font-size:0;

font-size0.png
• 将display为inline-block的元素放置在一行，此方法不适用与包含较多内容的元素

inline-block排成一行.png
• 使用浮动

浮动去除缝隙.png

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

父容器在使用overflow: auto| hidden后使其产生BFC，从而为float开辟出一个独立的空间，撑开父容器的高度。即：形成自己的“小宇宙”，从而把父容器撑开。

四、BFC是什么？如何形成BFC，有什么作用?

我的理解：BFC本质上就是是一个元素为其内部新生成的独立空间，内部的内容全被格式化成块级容器(注意是块级容器，不是块级元素)。

W3C定义：

浮动元素和绝对定位元素，非块级盒子的会计容器（例如inline-blocks,table-cells,和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

如何形成BFC：


• 为元素添加float非none的属性值
  
• 为元素添加postion:absolute
  
• 为元素添加display:inline-block | table-cells | table-caption
  
• 为元素添加overflow:auto | hidden

  作用：
  

• 防止外边距合并
  
• 清除浮动
  
• 使用BFC避免文字环绕

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

  当一个父容器的高度为自适应时，子元素浮动会导致父容器高度塌陷。

  How come？

  因为为元素添加浮动之后，会导致元素脱离文档流，导致其内容在父容器中抽离出来，由于父容器高度为自适应，即其高度全靠子元素内容撑开，子元素消失而父容器高度自然就会塌陷。

  栗子：

  
  
  

  没加浮动前.png
  

  高度塌陷.png

  Solutions:
  1.利用父元素形成BFC，从而为开辟出独立的空间。

  

  建立bfc.png

  2.利用clear:both/left/right;清除浮动

  

  both，left，right.png

  3.在父元素中添加伪元素：after和before，这是情况而定。

  

  after，before.png

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

  

  代码作用.png

• 以上两段代码的作用都是清除浮动，但是作用的场景不同。另外与通过父容器建立BFC的原理不同，它使用clear属性去清除浮动。after伪元素在IE8及以上才支持，所有第二段*zoom=1以防第一段代码失去效用之后，用来防止清除浮动失败。

• 第一段代买是通过在父容器clearfix设置伪元素，在父容器最后添加内容为空的块级元素，并使用clear:both;达到清除浮动的目的。
  
• 第二段代码的解释是：zoom属性是IE浏览器的专有属性，它本来是用来设置或检索对象的缩放比例，但原有属性很少被使用，最常使用的是利用触发IE浏览器的haslayou，以达到清除浮动和外边距合并的目的。

  代码作业：
  代码一

  代码二

  版权归饥人谷peter和饥人谷所有，若有转载，请注明来源。

  感谢吃瓜子观众：

  

  gaki11.png