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

• 相邻元素
  当两个元素上下相邻时，上面的下外边距会与下面元素的上外边距会合并。

相邻元素外边距合并

• 父子元素
  父子元素如果都有上边距，会合并为其中较大的那一个。

父子元素外边距合并

• 单个元素
  如果一个元素没有内容，也没有内边距和边框，那么它的上下外边距也会合并。

不让相邻元素外边距合并的方法

• 父子元素:
  为父元素创建BFC
  为父元素设置相应的padding或border
• 兄弟元素 :
  给兄弟元素添加float属性
  给兄弟元素添加position: absolute
  给兄弟元素添加display: inline-block

设置浮动，可以和之前父子边距合并比较一下

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

1.删去空格，使标签接一起。
2.负margin，但是，第一个元素会突出边框一点，另外设置第一个元素margin-left往回缩。
3.浮动，边框塌陷，父元素加overflow：auto
4.父元素fontsize设为0，子元素一定要重新设置字体大小⤵️

父元素fontsize设为0，子元素一定要重新设置字体大小

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

在父容器使用overflow:auto|hidden后，会姜父容器转化为BFC，因为计算BFC的高度时，浮动元素也参与计算，所以就能撑开。

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

BFC 定义:
　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
　　BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算。

• 形成BFC

设置float，值不为”none”
设置overflow，值不为”visible”（hidden，auto，scroll）
设置display的值为 “table-cell”, “table-caption”,或 “inline-block”
设置position，值不为 “static” 或 “relative”（absolute，fixed）

作用：清除浮动，使外边距不发生合并.

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

• 当没有设置任何高度宽度的父容器下只包含浮动元素，父元素高度就会坍塌，因为子元素设置浮动以后就脱离了文档流，父容器边框忽略了浮动元素。

1.浮动父级元素，父级元素的高度就会扩大，直到完全包含它里面的浮动元素。如果使用这种方法，一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方。
2.使用overflow:hidden,zoom:1 。overflow:hidden属性会强制父级元素扩大到包含浮动元素，zoom:1只是触发ie6
3.使用:after伪类清除，不会影响其他任何样式，通用性强。

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

题6

第一个是使用:after伪类添加一个没内容的空行内元素，转化为块状元素，然后再清除浮动；
第二个是加了一个class="clearfix"来清除浮动，里面*zoom:1;为了兼容性，在ie6，7上生效；用于页面放大缩小。

区别是BFC撑开空间是使父容器本身形成一个可以包含浮动元素的独立的空间，上述方法只是撑开了内容。

任务代码1
任务代码2

             本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源