Css中overflow属性的认识

    先来学一个和浮动没有什么关系的属性,overflow:hidden; 后面你将会看到这个属性和浮动的知识的联系。

    overflow:溢出;   hidden:隐藏。

    这个css属性,用于将溢出到盒子border外的内容隐藏。

    案例1:

   

    对溢出要做处理:

    添加:overflow:hidden

   

    再看一个案例:

   

   

   

    直观上看,这个属性对网页设计人员来说真是福音!比如一个盒子内部有一个比自己还宽的子盒子,这时候就会影响自己的表现。只需要给自己加上overflow:hidden即可。(当盒子掉下来了,不知道怎么哪儿溢出了,可以给父盒子加overflow:hidden;)

    这个属性还可以用来做什么呢?

    overflow:hidden可以用来清除浮动

    首先overflow:hidden可以清除浮动对后面元素的影响。

   

    接下来为:man添加样式 

   

    如何解决IE6中的兼容性问题呢?很简单,只需要再添加一个伴生属性:zoom:1,就可以了。

   

    zoom是IE浏览器中的一个属性(不是W3C的属性),用于控制显示倍数。这个属性用于控制页面中的任何元素显示倍数的,这个属性非常干扰前端开发工程师的工作,微软在IE9中砍掉了这个属性!【兼容性问题】也就是说用overflow:hidden来清除浮动,对IE6有兼容性问题。

    但是在这里我们借助zoom这个属性,设置1,盒子不会放大也不会缩小,但是会触发一个hasLayOut机制(有兴趣的同学可以百度)。

    在有hasLayOut机制的情况下,IE浏览器可以用overflow:hidden,_zoom:1来清除浮动的影响。

    小结:

    Overflow:hidden 作用:

    1、可以隐藏超出自己(border部分)的内容。

    2、可以清除浮动,但要注意IE6的兼容性问题,要同时添加一个伴生属性_zoon:1。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值