网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

详解CSS中zoom和overflow:auto属性的作用是什么

今天就跟大家聊聊有关详解CSS中zoom和overflow:auto属性的作用是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

站在用户的角度思考问题,与客户深入沟通,找到花溪网站设计与花溪网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、域名注册网站空间、企业邮箱。业务覆盖花溪地区。

前言

其实在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。

我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局,但是如果外面这个大容器的没有设置固定的高度值,那么大容器高度不会随着里面小容器高度变化而变化,产生内容溢出的现象,这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性,可以解决IE7和火狐浏览器下的清除浮动问题,但是IE6下不生效,所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。

实例代码





MJBlog

.box{ 
     width:300px;
  height:auto;
  background-color: #000000;
  margin:100px auto;
  padding:5px;

  }
.box h3{ width:300px; line-height:24px; color:#CCCCCC;}  
.xx { width:140px; float:left; height:24px; overflow:hidden; padding:0px 5px; line-height:24px; color: #FF9933;}
.za{overflow:auto; zoom:1}
.zb{overflow:auto;}
.zc{zoom:1;}     
  







这个没加overflow:auto和zoom:1属性,没有清除浮动,底下的li产生溢出重叠现象

福州酒吧万圣节派对活动
福州酒吧万圣节派对活动
福州酒吧万圣节派对活动
福州酒吧万圣节派对活动 福州酒吧万圣节派对活动 福州酒吧万圣节派对活动

这个加overflow:auto和zoom:1属性,清除浮动,正常

福州酒吧万圣节派对活动 福州酒吧万圣节派对活动 福州酒吧万圣节派对活动 福州酒吧万圣节派对活动 福州酒吧万圣节派对活动 福州酒吧万圣节派对活动

看完上述内容,你们对详解CSS中zoom和overflow:auto属性的作用是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网页标题:详解CSS中zoom和overflow:auto属性的作用是什么
网页网址:http://bjjierui.cn/article/gjppcj.html