任务10

1、文档流的概念指什么？有哪种方式可以让元素脱离文档流?

文档流是文档中可显示对象在排列时所占用的位置,元素的位置由元素在 (X)HTML 中的位置决定
通过定位与浮动的方法可以让元素脱离文档流。

2、有几种定位方式，分别是如何实现定位的，使用场景如何？

1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

3、absolute, relative, fixed 偏移的参考点分别是什么

absolute 参考点是相对于 static 定位以外的第一个已经定位的父级元素（相对/绝对）来决定的。
relative 参考点是相对于其正常位置进行定位。
fixed 参考点是相对于浏览器窗口进行定位。

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

z-index：针对网页显示中的一个特殊属性，为了表示三维立体的概念如元素的上下层的叠加顺序引入了 z-index 属性来表示 Z 轴。但其只对定位元素有效。下面是不同场景下的显示顺序：① z-index 值：值较大的元素将叠加在 z-index 值较小的元素之上，正数值将叠加在负数值得对象上。②相同 z-index 的叠加顺序：
如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index 相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素。

③父子关系处理：
如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方，即使是子元素的 z-index 值比父元素小，也会出现在父元素上方。
如果父元素z-index 失效（未定位或者使用默认值），那么定位子元素的 z-index 设置生效。

④兄弟之间子元素叠加顺序：由其父元素决定，父元素值高的叠加低的，不管子元素 z-index 值得大小。

QQ截图20160815214853.jpg QQ截图20160815214833.jpg

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

position:relative使元素发生偏移，虽然能够覆盖其他元素，但是只是位置发生了偏移，对于文档流没有影响，其他元素还会以为它还在那个位置。
负margin使元素位置发生偏移，也能够覆盖其他元素，但是其后的元素也会跟着它移动，会影响文档流。

1.jpg 2.jpg

6、如何让一个固定宽高的元素在页面上垂直水平居中?

把父元素设置成相对定位relative，子元素设置成绝对定位absolute，上偏移50%，左偏移50%，由于是点到点的偏移，所以元素会错过居中的位置，需要用上边距和左边距的负边距来回到剧中的位置，负边距的数值为被偏移元素宽高的一半。

3.jpg

7、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

浮动元素会脱离文档流，会在其他浮动后面继续浮动，由于有渲染的先后，所以有时浮动的顺序有所变化。
对于普通元素，浮动元素不会占据文档流的位置，所以普通元素会认为它不存在而继续文档流，但是块元素会在浮动元素的下面,行内元素和块元素中的行内内容会考虑浮动元素的边界,因此会围绕着浮动元素。
对于文字，文本内容会受到浮动元素的影响,会移动以留出空间，也就是常见的文字环绕。

8、清除浮动指什么? 如何清除浮动?

浮动元素引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清楚浮动实际上为前面的浮动元素留出了垂直空间，也可以解决上面问题中的第二个问题与第三个问题。

语法：clear : none | left | right | both

none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象