简明现代魔法 -> CSS层叠样式表 -> overflow 属性介绍

overflow 属性介绍

2010-05-13

overflow 属性规定如何处理如何处理不符合元素框的内容。用法如下:Object.style.overflow=visible|hidden|scroll|auto。

参数介绍:

本例使用 overflow 来显示溢出元素框的内容:

<html>
<head>
<style type="text/css">
div { border:thin solid green; width:100px; height:100px; }
</style>
<script type="text/javascript">
function hideOverflow()
{
	document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>

<div id="div1">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br />
<input type="button" onclick="hideOverflow()"
value="Hide overflow" />

</body>
</html>

相信大家都碰到过一种情况:没有给父级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的效果。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们