小姐

positio1n:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative相对自己原本的位置偏移，不影响其它普通流中元素的位置。

margin：除了让元素自身发生偏移还影响其它普通流中的元素。

BFC 是什么？如何生成 BFC？BFC 有什么作用？

BFC：块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

形成条件：
根元素或其它包含它的元素
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
内联块 inline-blocks (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
块元素具有overflow ，且值不是 visible
display: flow-root

注意：浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

应用：
自适应的两栏布局。
清除元素内部浮动。
嵌套元素margin边距合并问题的解决。

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

外边距合并出现的三个场景。

同一个BFC，且同处于普通流中的垂直相邻元素外边距合并。
父子元素的外边距合并。
空元素的外边距合并。

合并规则：

1两个margin都是正值的时候，取两者的最大值；
2当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
3当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
4所有毗邻的margin要一起参与运算，不能分步进行。

不让相邻元素外边距合并的方法：
1被非空内容、padding、border 或 clear 分隔开。
2不在一个普通流中或一个BFC中。
3margin在垂直方向上不毗邻。

总结：
1这些margin都处于普通流中，并在同一个BFC中；
2这些margin没有被非空内容、padding、border 或 clear 分隔开；
3这些margin在垂直方向上是毗邻的，包括以下几种情况：

• 一个box的top margin与第一个子box的top margin
• 一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
• 一个box的bottom margin与紧接着的下一个box的top margin
• 一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子元素。
  4例外的情况
  根元素的外边距不会参与折叠
  不设置任何属性的空span和空div不影响任何布局，可以无视之。