absolute系列之另类技巧

上篇介绍了基本的“猿猴行为”，但在长路漫漫的“猿猴生涯”中，势必会有些奇葩、不走常路的“行为”

　　1、葩1：top:0; bottom:0...  为了照顾这些特殊的“行为”，CSS 2.1规范给出了“指令”Visual formatting model details

限制法则如下：'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

来个栗子，水平垂直同时居中：

.container{position:relative...}
.item{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;....}

 

 margin:0 是要有的（具体规则见CSS 2.1规范）

　　2、葩2：absolute独自一人，不仅离relative而去，连top等对不顾。对于这种鲁莽的“行为”，CSS 2.1规范自然少不了对付它的方法。

具体介绍见张鑫旭大神的博客。