饥人谷-任务10

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

• 首先明确一点的是，W3C规范中没有document flow这个概念，只有normal-flow, 文档流的叫法主要还是多数中文译者的翻译方式问题。简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。即是将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素并且这种过程遵循标准的描述。
• 利用fixed定位、absolute定位、float都可以脱离正常文档流；

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

• 三种主要定位方式。relative 生成相对定位的元素，相对于其正常位置进行定位；absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。

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

• absolute: 相对于 static 定位以外的第一个父元素进行定位；
• relative: 相对于元素自身正常位置进行定位；
• fixed: 相对于浏览器窗口进行定位；

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

• z-index属性设置一个定位元素沿Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。Z-index仅能在定位元素上奏效默认都是z-index：0；数值越大，层级优先级越高。

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

• position：relative，不脱离文档流可以使元素发生偏移，但是在文档流中，类似人还在灵魂却跑了。因此它仍然占据着原来的位置，所以其他元素的位置不会发生变化。
• 负margin：通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，所以其他元素的位置发生了变化。简单来说：relative不会对文档流产生影响，他在文档流占的位置不变; margin改变文档流的位置，会影响后面的文档；

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

• 利用absolute和margin即可；

  
  垂直水平居中

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

• 浮动元素不占据空间，左右移动知道碰到包含框的边缘或浮动框；float会使元素脱离文档流，普通元素会填充其原来的位置；
• 同是浮动元素的话，会依次根据浏览器渲染的顺序上下或者左右浮动。
• 普通元素会占用浮动元素之前的位置，因其脱离文档流；
• 浮动元素会被文字环绕。

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

• 清除浮动元素给其他元素带来的影响。浮动的元素不占用文档流，因此会对其他的元素产生影响，破坏页面布局。用浮动布局页面可以达到想要的效果，但是带来的副作用也要清除干净。
• 在受影响的元素下用clear:both;