CSS属性之Overflow

当页面有上下两个DIV层时,由于上面的DIV文字内容过多,超出该层的高度和宽度,此时上面的DIV层中的内容会覆盖到下面的DIV层之上。如下图:

    CSS属性之Overflow - CH - 已经开始…

此时该怎么解决呢?这就会用到CSS的一个很有用的属性—Overflow。该属性有四个值:

· visible(默认值)

· hidden

· scroll

· auto

Visible

    Overflow的Visible属性是默认值,也就是说,最初说到的那种情况就是Visible在起作用。这里需要注意的是,虽然第一层的溢出的内容会覆盖到第二层之上,但是并不会将第二层挤出原来的位置。如上图。

Hidden

    Hidden值与默认值相反,它会将所有超出DIV层范围的所有内容都给隐藏掉。如下图:

       CSS属性之Overflow - CH - 已经开始…

       该属性对显示动态内容、由于内容溢出而引起一些布局上的问题的确很有用。但是,要记住用此方法隐藏的内容将彻底的看不到。比如:用户将他们的浏览器的默认字体调大,这将会使一些文字推到DIV层的外面被完全的隐藏。

 

Scroll

设置Overflow值为scroll将会在DIV层之内提供一个滚动条,从而可以查看到DIV层内所有的内容。如下图:

CSS属性之Overflow - CH - 已经开始…

需要注意的是:使用Scroll将会同时产生水平和垂直两个滚动条,就算内容只需要其中的一个。而且如果该DIV层没有任何内容也会显示水平和垂直的禁用的滚动条。所以针对这种情况,Overflow又提供了Auto值。

 

Auto

       Overflowauto值与scroll很像,它唯一不同的是在DIV层中的内容不需要滚动条的时候不会出现滚动条,与普通的DIV没有区别;如果内容超出范围就会显示滚动条。

猜你喜欢

转载自blog.csdn.net/helixue2012/article/details/49784207