这篇文章主要介绍了CSS中的zoom和overflow:auto属性有什么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS中的zoom和overflow:auto属性有什么用文章都会有所收获，下面我们一起
这篇文章主要介绍了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的私有属性来达到彻底清楚浮动的兼容效果。
实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>MJBlog</title><style type="text/css">.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;} </style></head><body><div class="box"><h3>这个没加overflow:auto和zoom:1属性，没有清除浮动，底下的li产生溢出重叠现象</h3><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div></div><div class="box za"><h3>这个加overflow:auto和zoom:1属性，清除浮动，正常</h3><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div><div class="xx">福州酒吧万圣节派对活动</div></div></body></html>css的基本语法是：
1、css规则由选择器和一条或多条声明两个部分构成；
2、选择器通常是需要改变样式的HTML元素；
3、每条声明由一个属性和一个值组成；
4、属性和属性值被冒号分隔开。
关于“CSS中的zoom和overflow:auto属性有什么用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS中的zoom和overflow:auto属性有什么用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。
--结束END--
本文标题: CSS中的zoom和overflow:auto属性有什么用
本文链接: https://lsjlt.com/news/348038.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0