当前位置：首页 >> 网站设计 >> css网站布局 >> 正文

CSS Overflow属性详解

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。

overflow属性有四个值：visible （默认）， hidden， scroll，和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。

Visiblea

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。

overflow visible CSS Overflow属性详解

这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：

overlap CSS Overflow属性详解

一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

css overflow hidden CSS Overflow属性详解

这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到（除非去查看源代码）。比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……

Scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。

css scroll CSS Overflow属性详解

值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。