全面阐述overflow:hidden属性
来源:互联网 发布:http android 访问数据 编辑:程序博客网 时间:2024/06/04 18:36
这是一个常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验
wai{ width:500px; background:#000; height:500px;}
nei { float:left; width:600px; height:600px; background:red;}
可以看到,我给nei这个id加了一个浮动,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个div和nei这个div的剩余值。
如果div wai中还包含其他的div,我不允许它出现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧。
这些在ie6里面是正确的。但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当nei这个div的宽度和高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。
这个时候我不理解了,我搜索了很多的资料,但是都没能理解这是为什么,直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了。
说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!
也就是说,当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少,对于已经脱离了的wai来说,都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)
OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小。
这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!
我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样,在div+css学习中能够不断的进步!
- 全面阐述overflow:hidden属性
- 全面阐述overflow:hidden属性
- 全面阐述overflow:hidden属性
- 全面阐述overflow:hidden属性
- 全面阐述overflow:hidden属性(转)
- 全面阐述overflow:hidden属性 (清除立体浮动)
- overflow:hidden属性
- overflow: hidden;属性
- CSS overflow:hidden 属性含义
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- overflow:hidden
- overflow:hidden
- overflow:hidden
- overflow:hidden
- PMBOK(第五版)学习笔记 —— 10 项目沟通管理
- 新手向!开源音乐播放器JamsMusicPlayer源码解析<1>
- 关于Unity3D图集打包、深度、DrawCalll分析
- while中的continue和if中的continue的区别
- 锁屏流程
- 全面阐述overflow:hidden属性
- 我比杨过幸运
- C和c++有哪些区别?
- 使用HttpURLConnection发送get和post请求
- Oracle 序列号当前值
- vagrant文件夹无法挂载问题
- UIBezierPath 的使用介绍
- JQuery 事件
- SPOJ 7001. Visible Lattice Points (莫比乌斯反演)