1、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

绝对定位：absolute（相对于 static 定位以外的第一个父元素进行定位）
绝对定位：fixed （相对于浏览器窗口进行定位）
相对定位：relative （相对于其正常位置进行定位，比如left:20px会向元素的 left 位置添加 20 像素）
静态定位：static（默认值。不进行定位，元素还是处于正常的文档流中，忽略上下左右的偏移和z-index声明）

2、z-index 有什么作用? 如何使用?

用于显示元素的上下层的叠加顺序，z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
参考1
参考2

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

position:relative不会影响其他的元素。虽然偏移了，但浏览器还是认为它在原来位置。
负margin会影响周边元素的位置

4、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC的全称是 Block Format Content（块级格式化上下文）

BFC特性

1、块级格式化上下文会阻止外边距叠加

当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。

因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠

2、块级格式化上下文不会重叠浮动元素

根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。

3、块级格式化上下文通常可以包含浮动

如何触发BFC呢？

• float 除了none以外的值 ，比如为：float: left / right;
• overflow 除了visible 以外的值，比如为：overflow: hidden / auto / scroll;
• display: table-cell / table-caption / inline-block / flex / inline-flex;
• position: absolute / fixed;
• fieldset元素

需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。

BFC作用：参考

1. 使margin不重叠
2. 清除浮动

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

1、上下兄弟元素外边距合并：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

如果元素左右相邻呢？一个典型的场景是几个inline-block元素并排显示。 但inline-block元素的外边距是不合并的，它们会保持自己的间隔。inline-block的上下外边距仍然不起作用的，因为它们是行内元素

兄弟元素合并

解决办法：设置浮动，display：inline-block或使其父元素均形成BFC可防止边距合并（如overflow:hidden）

解决兄弟元素合并

2、父子外边距合并：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

父子外边距合并

加了边框属性（或padding）后

解决父子外边距合并

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

连续相邻的外边距都是可以合并的。
比如这个外边距遇到另一个元素的外边距，它还会发生合并：

如何合并

1. 当两个外边距相邻都是正数，会合并较大值
2. 当两个外边距相邻都是负数，会合并绝对值的较大值
3. 当两个外边距一正一负，合并两者相加和

6、子元素设置宽度100%问题

1. 当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。
2. 当子元素是非绝对定位的元素时width:100%才是指子元素的 content 等于父元素的 content宽度

查看范例