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

文档流指的是元素按照其在 HTML 中的位置顺序决定排布的过程，或者说在排布过程中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

脱离文档流是布局的时候无视存在或认知存在的位置不变，但是显示的位置改变。

有三种方式来脱离文档流：文档流fix、浮动float、绝对定位position:absolute。

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

①比如fix是相对于浏览器窗口进行定位，不会因为页面的滑动而改变位置。可以写top、right、buttom、left来设置位置（其实比如放在右上角定位只需要写top和right的值就可以啦），同时如果页面有多个元素会有前后距离关系，可以写z-index来控制元素的前后优先级，显示的效果。

②position:relative是不脱离文档流的对自身位置进行直接定位。可以写top、right、buttom、left来设置位置，同时如果页面有多个元素会有前后距离关系，可以写z-index来控制元素的前后优先级，显示的效果。

③position:absolute是脱离文档流的定位方式，相对于自己的父容器或者body进行定位，优先寻找父容器有没有position:relative，如果没则按照body来定位。

④position:static是默认的定位方式，不写的时候就是这个参数，不能设置top、right、buttom、left，z-index也无效。

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

absolute偏移的参考点是加了relative的父元素，如果没有加了relative的父元素则是按照body来定位。

relative是相对于自己原来的位置进行定位。

fixed是相对于浏览器窗口进行定位。

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

z-index有设置一个DOM元素的堆叠顺序的作用，z-index的值更大那么会显示在更前面的位置，另反。

如果直接写z-index的参数是没用的，要写在比如有position:fix的元素一起。

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

position:relative是相对于自己的原来的位置进行偏移，对页面结构不会有任何影响，只是这一个元素的显示的位置会变化，但是浏览器认为它实际占用的位置没有变化。

负margin是直接调整元素的外边距，这会影响到整体的文档流。

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

在父容器上面写position:relative，这个元素写在父容器上对于父容器是不会有什么影响的，但是作用是里面的子元素使用position:absolute来定位。不在父容器里面写position:relative的话，子元素就会按照body来定位了，影响位置的写法。

再在子元素里面参数写top:50%；  left:50%；

根据要垂直水平居中的这个元素的宽高的各一半来设置margin-top和margin-left的值。

（比如需要垂直水平居中的元素宽是100高是200，那么设置margin-top:-100px； margin-left:-50px；酱紫。）

其实还有一种直接的方法，就是直接在需要垂直水平居中的元素上写上margin-top和margin-left来手动设置元素的垂直水平居中。

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

CSS的浮动最初是解决文字环绕图片的问题

浮动元素特征：脱离文档流，会收缩，只能撑开自身所占据的空间，浮动的块级元素会失去占据一行的特征。

浮动元素和浮动元素之间是互相认可存在位置的，但是非浮动元素不会认可浮动元素的存在，非浮动元素里面的比如文字等会围绕避开浮动元素。

112233

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

就比如上面112233看到的图片例子，当红色方块有float:right的时候，DOM下面的正常DIV无视这个浮动元素照样放在上面，如果你想要下面正常的DIV按照从上往下的顺序放到红色块的下面的话，可以在这个正常DIV里面写clear:right或者clear:both。