188月

overflow:hidden语法属性全面理解

SEO/网站推广, 前端开发DIV+CSS

Overflow: hidden 的使用

引用:
overflow 版本:CSS2  兼容性:IE4+ NS6+ 继承性:无

语法:

overflow : visible | auto | hidden | scroll

参数:

visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

说明:

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
自IE5开始,此属性在MAC平台上可用。

overflow:hidden清除浮动

一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细的阐述一下。

<div id=”outside”>
 <div id=”inside”></div>
</div>

这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验

#outside{ width:500px;  background:#000; height:500px;}

#inside { float:left; width:600px; height:600px; background:red;}

可以看到,我给inside这个id加了一个浮动,我们常规的理解是,我们允许inside这个id的div的右边出现其他的内容,只要它的宽度不超过outside这个div和inside这个div的剩余值。

如果div outside中还包含其他的div,我不允许它出现在inside的右侧,我们则用样式clear:both指定这个div,不允许它浮动在inside右侧。

这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当inside这个div的宽度和高度都大于outside这个div的时候,outside并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。

这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给outside这个div加了一个overflow:hidden这个属性解决了这个问题。

我们直到overflow:hidden这个属性的作用是隐藏溢出,给outside加上这个属性后,我们的inside的宽高自动的被隐藏掉了。另外,我们再做一个试验,将outside这个div的高度值删除后,我们发现,outside的高度自动的被inside这个div的高度值给撑开了。

说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!

也就是说,当inside这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了outside这个div,也就是说,此时的inside的宽高是多少,对于已经脱离了的outside来说,都是不起作用的。

当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给outside这个div加上overflow:hidden这个属性的时候,其中的inside等等带浮动属性的div的在这个立体的浮动已经被清除了。

这就是overflow:hidden这个属性清除浮动的准确含义。

当我们没有给outside这个div设置高度的时候,inside这个div的高度,就会撑开outside这个div,而在另一个方面,我们要注意到的是,当我们给outside这个div加上一个高度值,那么无论inside这个div的高度是多少,outside这个高度都是我们设定的值。而当inside的高度超过outside的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!

标准DIV+CSS英文网站建设www.onlygrape.com


分享到:



No comments

星期一, 8月 18th, 2008 | 分类:SEO/网站推广, 前端开发DIV+CSS | RSS 2.0 | 留言/评论 | Trackback

留言