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

• 文档流是指可显示对象在文档中排列时所占用的位置，html的文档流指的是位于页面中的元素依照原始的书写位置从上到下、从左到右依次显示出来的位置
• position定位中的absolute、fixed，浮动float属性

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

• CSS 有三种基本的定位机制：普通流（文档流）、浮动和绝对定位。
  position属性共有四种取值：

  1. static：默认值，即正常文档流的表现形式，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
  2. relative：相对定位，对于其原本位置进行定位，但是其原来所占用的空间依然存在，即不脱离文档流。如”left:20px” 会使元素的left距离原来的位置添加 20 像素。
  3. absolut：绝对定位，相对于 static 定位以外的第一个父元素进行定位。脱离文档流，不占据空间，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
  4. fixed:绝对定位，脱离所有元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

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

• absolute偏移的参考点除static 定位以外的第一个父元素进行定位
• relative相对于其正常位置进行定位
• fixed相对于浏览器窗口进行定位

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

• z-index属性表示一个元素在叠加顺序上的上下立体关系，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。默认值auto，堆叠顺序与父元素相等。
• 只能用在定位元素上，元素脱离文档流时表示显示的层叠顺序

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

• 负margin是外边距为负值而元素产生的偏移，和正margin产生的偏移效果一样，会保持原本的文档流顺序进行渲染
• 相对定位是现对于原本位置进行偏移，会与其他元素产生重叠，但是原本空间依然在文档流中占有，并不脱离文档流。

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

• 用绝对定位position:absolute。设置子元素水平、垂直位移至页面的中心位置。
  举例：
  

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

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。由于浮动元素脱离了文档流，所以对普通元素产生一定的覆盖，文字可以感知到浮动元素的存在从而环绕浮动元素排列。浮动元素之间将并列分布。

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

• 清除浮动指清除浮动元素对其他元素的排版布局影响。
• 清除浮动：

  clear : none | left | right | both；取值只对本元素有效
  取值：
  none : 默认值.，允许两边都可以有浮动对象
  left : 不允许本元素左边有浮动对象
  right : 不允许本元素右边有浮动对象
  both : 不允许有浮动对象

代码：

1、github链接

2、github链接