这次给大家带来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 h2{ 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属性，清除浮动，正常
福州酒吧万圣节派对活动
福州酒吧万圣节派对活动
福州酒吧万圣节派对活动
福州酒吧万圣节派对活动
福州酒吧万圣节派对活动
福州酒吧万圣节派对活动
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
常用的颜色渐变方法总结
2D模拟实现摩天轮旋转动画特效
CSS3的box-sizing属性图文教程
以上就是CSS中zoom属性或overflow:auto的使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609756.html
微信扫一扫 
支付宝扫一扫 
