绝对定位下的盒模型

元素被绝对定位，那么元素将会脱离正常流（normal flow），并依据包含块来定位。包含块的概念及其判定可以看这里。

在负margin的应用一文中，我们提到了一个对于任意一个块元素所形成的框的尺寸的计算公式：

　　BoxWidth = MarginLeft + BorderLeftWidth + PaddingLeft + ContentWidth + PaddingLeft + BorderRightWidth + MarginRightWidth;

但是在含有绝对定位元素的包含块内，包含块的尺寸却不能由上述公式计算，而是：

　　ContainerBoxWidth =  left + MarginLeft + BorderLeftWidth + PaddingLeft + ContentWidth + PaddingLeft + BorderRightWidth + MarginRightWidth + right;

其中left和right为绝对定位元素的偏移值。在公式中，除了paddingLeft和paddingRight以及borderLeft，borderRight的width不能设置为auto，其余的属性均可以。

但是对于绝对定位元素，left，right，top属性设置为auto时，会发生比较有趣的现象。当left:auto时，元素的左边将和元素的静态位置的左侧对其。所谓静态位置，就是元素并未脱离正常流情况下所在的位置。当right和top设为auto时，一样道理。但是bottom却没法取得静态位置。

 

所以根据上述公式，我们也可设计一种绝对定位元素居中的方式，

　　

{position:absolute;
  left:0;
  right:0;
  width:50px;
  margin:10px auto;  
}

这样就使元素水平居中，垂直居中也一样道理。原理就是根据上述公式，将对应方向的margin设为auto，这样浏览器就会计算出合适左右（上下）边距，居中对齐。

但是IE6,7,8（Q）不支持绝对定位元素的这种垂直居中方式。

 

另外，在宽度过度受限的情况下，将会选择性的充值某个属性。

比如：

{position:absolute;
  left:10px;
  right:10px;
  width:50px;
  margin:10px 0px;  
  padding:0px;
}

　　在包含块宽度为90px的情况下，这些数据不满足上述公式。此时，浏览器会舍弃某个属性值。

 

对于从左向右书写的语言，会舍弃right的值，并重新赋值right:30px。

 

利用上述绝对定位的性质，可以实现一个元素在包含块中的水平垂直居中对齐：

　　

{
     position: absolute;
     top: 0%;
     right: 0%;
     bottom: 0%;
     left: 0%;
     margin: auto;
}