css 盒模型 hasLayout position float

hasLayout是IE为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性。

display:inline-block  有width,height,margin,padding  却不独占一行，很好

但IE6，7不支持inline-block，inline-block只能触发IE6，7下行内元素的hasLayout

即：IE6，7下，设置inline-block的块级元素：白设

                                            行内元素：可设width,height...  效果同zoom:1

例：abcde<span>12345</span>  span{display:inline-block;height:30px;width:100px;background:#ccc;}

ie6/7

ie8/ff

为兼容顶对齐：span{*vertical-align:-10px;_vertical-align:-10px;} 值根据需要自己设

img button很超然，可设长宽但却不独占一行

*****************************************************************************************************************************

position:relative absolute都可以激活left top rigth bottom 和 z-index属性

文档流：元素根据自己的display类型、长宽、内外边距等属性顺序排列在z-index:0这一层里。

relative absolute都会让元素浮起来，z-index>0

relative 会保留自己在z-index:0层的点位，left top ... 都是相对自己原有的位置

absolute 不保留自己原来位置，left top ... 是相对于距自己最近的一个设置了relative或absolute的祖先元素的位置偏移。找不到祖宗就找body

float仍然让元素在z-index:0层流动，会改变正常的文档流，影响周围元素。

relative 不会改变元素display类型；absolute和float会让元素以inline-block方式显示。再显示地设置display为inline/block也无效。

{float:left; display:inline}可解决IE6双边距问题

 

转载于:https://www.cnblogs.com/frostbelt/archive/2012/03/10/2388731.html