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

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

• 外边距合并：如下图所示，当块元素在正常文档流中，它们之间相邻（a和bottom和b的top）的外边距会现合并,当块元素浮动脱离文档流，或者以inline-block（本身自带间距）时，它们之间相邻的外边距不会被合并。合并时取值以他们之间同时满足条件的较大值。

Paste_Image.png

Paste_Image.png

• 外边距合并场景以及如何合并

  1. 相邻的同胞元素

     
     
     

     Paste_Image.png

  2. 父元素与子元素

• 第一个子元素的上外边距和父元素的上外边距。

Paste_Image.png

• 最后一个子元素的下外边距和父元素的下外边距。(注意下图右边的下拉条)。

  
  
  

  Paste_Image.png

如果块元素的 margin-top
与它的第一个子元素的margin-top
之间没有 border
、padding
、inline content、* clearance
* 来分隔，或者块元素的 margin-bottom
与它的最后一个子元素的margin-bottom
之间没有 border
、padding
、inline content、height
、min-height
、 max-height
分隔，那么外边距会合并(塌陷)。子元素多余的外边距会被父元素的外边距截断。

3.空元素:如下图，设置它的上外边距为100px.下外边距为200px.但是它的总高度为200px.说明它的上外边距和下外边距合并。

Paste_Image.png

• 如何不让相邻外边距合并？

• 创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠.
• 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）

Paste_Image.png

Paste_Image.png

• 绝对定位元素不与任何元素的外边距产生折叠

Paste_Image.png

• inline-block元素不与任何元素的外边距产生折叠

Paste_Image.png

• 一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙(clearance)
• 一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
• 一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
• 一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

---

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

• inline-block内缝隙现象：

Paste_Image.png

• 去除间隙方法：
  1.让元素之间本身没有间隙

Paste_Image.png

2.设置父元素font-size:0；消除占位符。

Paste_Image.png

3.浮动

Paste_Image.png

4.负margin，第一个需要特别设置。

Paste_Image.png

---

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

• overflow:auto|hidden会创建一个BFC（块级格式上下文），而BFC中每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

Paste_Image.png

---

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

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC形成条件

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

作用：
1.为p元素创建一个新的BFC，使它不受外界其他元素的影响。

Paste_Image.png

2.使父元素不受浮动（脱离文档流的元素）元素影响而塌陷。

Paste_Image.png

---

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

• 看图说话： 注意看父容器边框，父容器没有设置height值。

Paste_Image.png

• 因为浮动会使元素脱离文档流，父容器失去撑开它高度的条件，所以塌陷。

• 解决方法。
  1.空元素设置clear属性。

Paste_Image.png

或者使用css伪类::after(原理同上)

Paste_Image.png

2 为其父元素创建一个BFC。（图中所示o:h只是其中一种创建BFC的方式。）

Paste_Image.png

---

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

.clearfix:after{  /*after属性，在class="clearfix"的元素后面添加下面属性*/
 content: ''; display: block; clear: both; /*一个内容为空的元素，并且以块元素方式呈现，左右不允许有浮动元素。*/
}
.clearfix{ *zoom: 1;}  /zoom为IE的私有属性，而*也只有IE才会识别*后面的代码，zomm：1（设置对象的缩放比例）在这里只是IE用来清除浮动的一种方法。*/

---

这个任务做得头有点痛阿！！！！！！！！！！！
本文版权归本人和饥人谷所有，转载请注明来源！

---