Web前端知识

首页 > 免费 > Web前端知识 >

关于overflow的小知识!

来源:北京汇仁智杰科技有限公司   时间:2015-11-02   点击:

  打开template.css阅读第一行时,震惊了,第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码:

  1.body{overflow:hidden; _overflow:visible; _zoom:1;}

  2.main{overflow:hidden; _overflow:visible; _zoom:1;}

  短短三个属性竟然包含了浮动、浮动清除、Haslayout、IE6兼容性、最小高度不同浏览器下实现、浏览器Hack、overflow的各种用途等等一系列的问题及知识点。

  接下来分析这行代码里面各个属性真正的意义:

  1.overflow:hidden写在应用在包裹元素上的.body和.main,其目的是利用其清除浮动的特性而非隐藏内部元素特性。

  2.为了兼容性要触发IE6/7的hasLayout。这里运用overflow:hidden的特性以最小的代价在IE7下清除浮动效果同时并触发hasLayout,一举二得。IE6用的是专有Hack和zoom属性(_zoom:1)来触发hasLayout。

  3.既然我们使用overflow:hidden是为了清除浮动,所以我们绝对不能让元素有高度属性。而实际工作中,往往要求必要的基本高度来达到合理的布局要求,那么这个时候需要使用最小高度min-height,根据前面的知识我们得知IE6实现最小高度的方法是用height实现,而我们的overflow:hidden为了清除浮动大局观是不允许出现固定高度的,使用了hidden再添加了height,那么overflow的特性则发生转变,变成了隐藏溢出的功能。这里次利用IE6下的overflow:visible的bug,让IE6下的父元素自动撑开,达到了所谓的清除浮动的目的,可以说的上是歪打正着,于是乎,产生了_overflow:visible的写法。

  短短的一行代码,总结下来也不过是上面短短的几句话,但是其一系列的知识点串联往往发现还有很长的一段路要走,希望这篇文章能够带给你些许的启示!

网络营销推广 . 北京汇仁智杰科技有限公司!

地址:北京市昌平区回龙观龙冠大厦5层
咨询:13370157521
业务QQ:373002979
E - mail:sales @ huirenzhijie.com
企业网站备案:京ICP备15021091号-1

汇仁智杰与众不同

  • 有网络推广经验
  • 有网站建站队伍
  • 有大型网站建设经验
  • 致力于营销型网站建设
  • 始终坚持技术和服务同样重要
查看PC版网站
备案号:京ICP备15021091号-1 版权所有:汇仁智杰