CSS zoom属性用法
分类:实例代码
此属性只有IE浏览器支持,其他的例如谷歌或者火狐浏览器并不支持,它可以设置元素的缩放效果,但是还有一些其他非常实用的用法,例如触发IE浏览器的hasLayout属性以用来清除浮动或者其他作用。
一.zoom的基本用法:
此属性的初衷是用在控制元素的缩放效果。
语法结构:
zoom:normal | <number> | <percentage>
参数解释:
1.normal:表示对象采用默认的尺寸大小,相当于zoom值等于1.0或者100%。
2.number:一个浮点数,表示元素的放大倍数,1.0为基数。
3.percentage:百分数,表示元素的放大百分,100%为基数。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>CSS教程</title> <style type="text/css"> div{margin-top:10px;} .first{ zoom:1; width:150px; height:80px; border:1px solid green; } .second{ zoom:1.5; width:150px; height:80px; border:1px solid green; } .third{ zoom:50%; width:150px; height:80px; border:1px solid green; } .fourth{ zoom:100%; width:150px; height:80px; border:1px solid green; } </style> </head> <body> <div class="first">前端教程网欢迎您</div> <div class="second">前端教程网欢迎您</div> <div class="third">前端教程网欢迎您</div> <div class="fourth">前端教程网欢迎您</div> </body> </html>
以上你代码实现了元素的和元素中文本的缩放功能。
但是由于该属性只有IE浏览器支持,所以用途不大,很少在代码中有此用法。
二.其他用途:
zoom属性虽然在缩放上无用武之地,但是在低版本的IE浏览器中则有不小的用途,最典型的就是清除浮动中的应用。
zoom:1可以用来解决IE6的子元素浮动时候父元素不自动扩大的问题。
功能相当于overflow:auto,同样也可以用height:1%来代替zoom:1。
代码如下:
.border{ border:1px solid #CCC; padding:2px; overflow:hidden; _zoom:1; }
_zoom是专门针对IE6的hack,由于zoom值是1,所以在IE6浏览器中元素也不会出现缩放效果,同时它和overflow:hidden结合起来使用,具有清除浮动的效果。
CSS zoom属性用法,这样的场景在实际项目中还是用的比较多的,关于CSS zoom属性用法就介绍到这了。
CSS zoom属性用法属于前端实例代码,有关更多实例代码大家可以查看。