CSS布局浮动和溢出控制及定位及显示类型

overflow         溢出控制

属性值

1）visible         默认值，不剪切内容也不添加滚动条

2）auto            自动，内容超出时就会被裁切或显示滚动条

3）hidden        超出的内容隐藏

4）scroll           总是显示滚动条

例子：     <style>

Div{width:100px;height:50px;overflow:auto;}

</style>

<div>

这是一大段内容这是一大段内容

</div>

display   显示类型

属性值

1）block           将对象强制作为块对象显示

2）None           隐藏对象

3）Inline           将对象强制作为内联对象

4）Inline-block         将对象做为内联对象显示，但是对象的内容作为块对象排列。旁边的内联对象会被显示排列在同一行内

5）List-item    将块对象指定为列表项目

例子：

<span style=”display:block;”>我是span内容</span>

<span style=”display:block;”>我是span内容</span>

 

<div style=”display:inline;”>我是div内容</div>

<div style=”display:inline;”>我是div内容</div>

 

<a href=”#” style=”display:list-item;”>链接</a>

<a href=”#” style=”display:list-item;”>链接</a>

 

1、位置属性

相对定位         relative

绝对定位         absolute

固定定位    fixed

设定定位对象的上下左右位置，单位为像素（px）

（1）top          距离参考对象上部的位置

（2）Bottom  距离参考对象下方的距离

（3）Left         距离参考对象左侧的距离

（4）Right      距离参考对象右侧的距离

2、绝对定位

Position:absolute;

以上一次设置定位属性的父对象为参考对象进行定位

如果没有上一次设置的定位父对象，则以body为准

2、相对定位

Position:relative;

当前对象的位置相对于该对象的未进行定位控制前的位置进行定位