CSS中overflow属性用法介绍

01 
 
02 
 
03 
 
04div{border:thinsolidgreen;width:100px;height:100px;}  
 
05 
 
06 
 
07functionhideOverflow()  
 
08{  
 
09document.getElementById("div1").style.overflow="hidden";  
 
10}  
 
11 
 
12 
 
13 
 
14  
 
15 
 
16Thisissometext.Thisissometext.Thisissometext.  
 
17Thisissometext.Thisissometext.Thisissometext.  
 
18Thisissometext.Thisissometext.Thisissometext.  
 
19

 相信大家都碰到过一种情况：没有给父级div指定高度。希望他通过子级div的高度变化而自动适应。看似很简单，但日常应用中往往对子级div有更多要求，比如多重子级div、子级div左（右）浮动等等。这时就会碰到一种比较郁闷的情况：父级div无法随着子级div的高度增加而增加，发生”脱层”的现象。这种时候就需要用到”overflow:hidden;”这个属性了。表面意思来看他的作用是隐藏div层，而当我们给父级div应用这个属性的时候会发现它神奇的变得自适应了。

对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。

overflow:hidden---这样超出部分会自动隐藏，这样做不好的地方是就是这部分的信息显示不完全，比如图片只显示了一部分，但是页面布局不会乱。要注意的是，使用overflow的时候，一定要定义width，百分比或者具体值都可以。（在用ul和li做图片列表排列的时候，也可以用这个，这样避免一些大尺寸图搞乱布局，也可以解决浏览器窗口缩小时，li元素自动回行排列出错的问题）。用overflow:auto，还可以在页面里模仿出IFRAME的效果。
 

【编辑推荐】

1. link与@import在外部引用CSS中的区别
2. 技术分享 如何实现CSS横向导航
3. DIV CSS表单布局五个小技巧使用秘笈
4. 完美实现丰富的CSS文字效果
5. 鼠标经过时改变DIV背景颜色的三种途径