CSS中定位详解

CSS中包含三种定位方式，

1、默认的文档流布局。

2、position定位。

3、float定位。

一、使元素垂直居中的方法：

  方法一、使容器内的行高：line-height等于容器本身高度。这种情况只适用于一行文本。当有多行文本时就不适用了。

  方法二：使用div模拟表格效果，也就是将多个div的display属性设置为"table"“table-cell”.

缺点：该方法只适合现代浏览器在IE6和7都不支持。

    二、position定位

 position一共有四个可选属性：static,relative,absolute,fixed.

(1)其中static（静态定位）是默认值。即所有元素如果不设置position属性，默认为static 有和没有它都一样。

(2)relative

relative 定位会导致自身的变化。而不会影响其他元素的位置，大小的变化。还有第二个要点，就是relative产生一个新的定位上下文

(3)absolute

absolute元素脱离了文档结构，只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。

absolute元素具有包裹性。其宽度适应内容。

absolute元素具有跟随性。随脱离了文档结构但它的位置并没有改变（当没有设置top和left等时），

 absolute元素会悬浮在页面上方，会遮挡下方的页面内容。

设置absolute属性会使原有float失效。

（4） fixed

其实，fixed和absolute是一样的，唯一的区别在于absolute根据最近定位的上下文确定位置，而，fixed永远根据浏览器确定位置。

（5）定位上下文

    relative元素的定位永远是相对于元素自身位置的，和其他元素没有关系，也不会影响其他元素。

    fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系，但它具有破坏性，会导致其他元素位置变化。

    absolute的定位相对于前两者要复杂许多。如果为absolute设置了top,left,浏览器会递归查找该元素的所有父元素，如果找到了一个设置position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没有找到就以浏览器边界定位。

    三、float定位

（1）破坏性

float最初设计为实现文字环绕。但是 被设置float的元素会脱离文档流。具有一定的破坏性。

（2）包裹性

普通的DIV如果没有设置宽度，它会撑满整个屏幕，而如果给div增加float:left之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

注意：此时div虽然体现了包裹性，但它的display样式还为block.

（3）清空格。

正常的多个img之间是有空格的，当把每一个img都设置为float:left，可以使图片之间没有空格，严丝合缝。

”清空格“这一特性的根本原因是float会导致节点脱离文档流结构，它都不属于文档流了，那么它身边的什么换行，空格就都和它没有什么关系了。

（4）清除float

我们知道float具有破坏性，那么我们应该怎样去除这个影响呢？也就是清除浮动

1、为父元素overflow:hidden（让父级紧贴，）

2、浮动父元素

3、clear:both;

4、clearfix

eg:#myfu:after{

 content:"";

 visibility: hidden;

 height: 0;

 display:block;

 clear:both;

}

块级排版上下文：用于对块级元素排版，默认情况下只有根元素（也就是body）一个块级上下文，但是如果一个块级元素设置了：float：left,overflow:hidden,position:absolute,就会为这个块级元素生成独立的块级上下文。就像window在全局作用域内声明了一个function就会生成一个独立的作用域一样。使这个块级元素的排版完全独立隔离。

独立的块级上下文可以包裹浮动流全部浮动子元素也不会引起容器高度塌陷，

当父元素设置了overflow之后，首先会计算height:auto;的真是高度，由于创建了一个独立的块级作用域上下文，需要包含子元素，所以高度不是零，而是子元素高度。