当前位置:爱推吧 » Div+CSS » 消除div+css布局之定位与浮动的难点

消除div+css布局之定位与浮动的难点

网络发展越来越快啦,网站的布局也从原来的表格Table转变成内容和形式相分离的DIV+CSS结构了,但是用div+CSS设计过程中也有一些难点,如果能克服这些东西,相信对你网页的布局设计将有相当的好处。

下面就我就自己对div+CSS布局的一些想法及技巧,来与大家分享一下。呵呵 不妥之处,敬请谅解、指证。主要讲述二个方面的知识,一是浮动,一是定位。

先说定位positon吧,它有相当定位relative绝对定位absolute,这两个属性对大家来说可能是个难点。Relative,相对,相对,指的就是它相对它原来在文档流中的位置,当然你也可以配合top、bottom、left、right使用,用这几个方位属性来对它进行移动(相对于它原来在文档流的位置)。比如 div{position:relative;top:5px; left:5px;},它相对原来位置向右、向下分别移动了5px,虽然移动了,但它的还霸占着原来的位置,不让诸如文本流来填充原来的位置。

absolute,绝对定位,要想使用它,首先得有一个定位的基准,比如父级元素相对定位(即使它还在原来的位置),.farther{position:relative;}子元素使用绝对定位的时候它才能相当父元素移动,否则它将相对浏览窗口移动。

浮动Float,如果父级元素没有浮动,且没有设置高度,而子级元素都浮动了,那么子级元素要跳出父级的Div的块框。解决这种情况有三种办法。

  1. 父元素div{overflow:auto;zoom:1;};
  2. 父元素div{overflow:auto;height:100%;}
  3. 父元素里最后一个子元素清理浮动div.child{clear:both;}

好了,以后有什么新想法的,还会继续和大家分享。

4 个吐槽 on “消除div+css布局之定位与浮动的难点”

发表评论

电子邮件地址不会被公开。 必填项已用*标注