margin专题

1文档流的概念是指什么呢？有哪些方式可以脱离文档流呢？

文档流是元素按照其在html中的位置顺序决定排布的过程，从窗体自上而下分成一行行，并在每行中按从左到右分行一行行！

有三种方式可以让元素脱离文档流：

文档流fix，浮动，定位position:absolute

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

fixed是相对于浏览器窗口进行定位，不会因为页面的滑动而改变位置。可以用top,right,bottom,left,来设置位置同时如果页面有多个元素会有前后距离关系，可以写z-index来控制元素的前后优先级，显示的效果。

position:relative是不脱离文档流的对自身位置进行直接定位，可以用top,bottom,left,right来设置位置，可以z-index

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

position:static是默认的定位方式，不能设置top等属性

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

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

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

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

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

z-index有设置一个dom元素的堆叠顺序的作用，z-index的值更大那么会显示在更前面的位置，另反。他和定位属性一起使用

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

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

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

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

固定高宽div垂直居中

div{

width:200px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:100px;

}

不固定高宽div垂直居中的方法

第一种方法

方法三，终极解决方法：

以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！

方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()