DIV+CSS布局总结

1.  元素定位

1.1 Float

Float：内容不会覆盖

1.   F子块内容脱离父块，故父块高度变小

2.   F子块左、右浮动，F子块的宽度变小

    a)   父块的padding-left+F块的margin-left

3.   N子块上移，且内容环绕F子块，

    a)   N子块边框、背景色撑满父块，但内容不会和F块重叠，而是环绕

    b)   N子块内容保持着F块设置的margin

    c)   给N子块也设Float则N子块不再环绕F子块，会并排向父块浮动靠近

4.   应用：首字放大、图文环绕

5.   如果没有父块，则把Body想象为父块

注：

父块（N子块、N子块）=》父块（F子块、N子块）=》父块（F子块、F子块）

=》父块（F子块、N子块、N子块）=》父块（F子块、F子块、N子块）

1.2 Position

Position取值：内容会覆盖

1.   Static默认值，块保持在应该在的位置上，没有任何移动效果

2.   Absolute绝对位置（相对BODY）

    a)   A子块不再属于父块，故父块高度变小

    b)   N块上移

    c)   Top、right、bottom、left相对页面body各边距离

    d)   可通过z-index层叠

3.   Relative(相对父块)

    a)   R子块根据top、left等移动，但宽度不变，所以边框会超出父块，避免：可指定宽度

    b)   R子块仍属于父块，故不会影响父块高度、其它N块的位置

    c)   不可层叠

4.   fixed

    a)   本质上和absolute一样，不过块不会随着浏览器的滚动条向上或者向下移动

    b)   IE6、IE7不支持，故不推荐使用

注：Top、right、bottom、left只有当position为absolute或relative时才有效

Left/right，top/bottom不要同时设置四个，不然IE和火狐会显示不同

1.3 Z-index

用于调整垂直页面方向的各块之间的重叠高低关系

1.   值大的位于值小的上方

2.   默认0

 

 

E:\workspace-nfjd\aiweb\WebContent\aiweb3.0\css\tabPanel.css

当a里面由于padding-top使文字下移后，造成背景也移到了，可使用background-position-y:0px;定位