新闻动态

   

您现在的位置是:首页 » 新闻动态 » DIV+CSS专区


CSS布局浮动(float)和定位(position)属性的区别和如何使用


人气: 3061  日期: 2011-11-19  作者: 大向网络  [打印本文]

postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

人们也就利用这种差异,可以做出CSS代码的滑动门菜单。

hover时取当前元素为保留位置,定义一个relative时,没有hover时使用float清空保留位置。

比较示例中的3个样式表,就可以发现:


  
  上一篇:如何清除列表前的圆点
  下一篇:网站设计常用的CSS技巧
相关文章(Tags:CSS)