task10

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

特征：元素浮动可以使文件脱离普通流，根据设置向左或向右浮动。

父容器：元素浮动之后无法被父容器感知，从而会导致父容器高度塌陷。

其他浮动元素：设置为同一方向浮动的元素，在父容器宽度足够的时候呈水平排列。宽度不够则会另起一行。在向左浮动时，如果左边有元素比其他元素高出一块，则会挡住后面另起一行的元素。

普通元素：在浮动元素之后的元素因为感知不到浮动元素会覆盖到浮动元素的下方。

文字：文字可以感知到浮动元素，文字会环绕着浮动元素显示。

2.清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动：解决因设置元素为浮动而带来的负元素高度塌陷的问题。

方法：

在父元素的最后添加新的div元素，设置样式clear:both;
给父类元素设置伪类选择器（:after，:before），然后加入代码

.container:after{
content:"";
display:block;
clear:both;
}

使父元素形成BFC来清理浮动。

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

static: 默认值，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

relative: 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px。

absolute: 生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。absolute会使元素脱离普通流，原来的位置会被其他元素填充。

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。用在各种不随滚动条滚动而变化的元素，如对联广告等。

4.z-index 有什么作用? 如何使用? 引用自

z-index只可以给设置了position为非static的元素使用。z-index决定了元素的堆叠顺序。
每次给一个新元素设置z-index除auto以外的值都会创造一个新的层叠上下文。
在同一个层叠上下文中z-index较大一方会排在z-index较小一方的上面。
在同一个层叠层中z-index较大一方会排在z-index较小一方的上面。

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

position:relative只改变元素的显示位置，而不改变元素在普通流中的位置，所以不会对其他元素产生影响。
负margin改变了元素在普通流的位置并且会影响其他元素。

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

是什么：BFC可以使元素形成一个容器，容器中的元素不会影响到外部的其他元素。

如何生成：

设置float为left或者right。
设置overflow为hidden、auto、scroll三者中的一种。
设置display为inline-block、table-caption、table-cell三者中的一种。
设置position为inline-block, table-cell, table-caption, flex, inline-flex.

作用：解决margin重叠问题，清除浮动。

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

在什么场景下会出现外边距合并？

相邻的兄弟姐妹元素
块级父元素与其第一个/最后一个子元素
空块元素

如何合并？
两个正margin会留下较大的一个
两个负margin会留下绝对值较大的一个
一正一副会留下两个相加的和
如何不让相邻元素外边距合并？
给元素设置border或者padding或者让元素形成BFC。

Capture.PNG

图中box2为父元素，box1为子元素。

Capture1.PNG

Capture2.PNG

8.代码

http://js.jirengu.com/nejibuhiha/1/edit
http://js.jirengu.com/vonuqeqaco/1/edit
http://js.jirengu.com/tivegekoyu/1/edit?html,css,output
http://js.jirengu.com/pomibepene/1/edit?html,css,output