CSS属性之Overflow

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

   

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

· visible（默认值）

· hidden

· scroll

· auto

 

Visible

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

 

Hidden

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

      

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

 

Scroll

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

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

 

Auto

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