首页 > web前端 > html教程 > css中的zoom的使用

css中的zoom的使用

巴扎黑
发布: 2017-06-02 16:02:28
原创
4209 人浏览过

css中的zoom的使用

 zoom : normal | number 
 normal :  默认值。使用对象的实际尺寸 
 number :  百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可 以是数值,也可以是百分比。如:zoom:1,zoom:120%。

ps:网上都说是ie的专有属性,本人亲测chrome下也可以使用;(Firefox浏览器不支持)

实例一:


.first-p{   
         width: 100px;   
         height: 100px;   
         background: red;   
         zoom:1;   
         float: left  
     }   
     .second-p{   
         width: 100px;   
         height: 100px;   
         background: green;   
         zoom:1.5;   
         float:left  
     }   
     .third-p{   
         width: 100px;   
         height: 100px;   
         background: blue;   
         zoom:2;   
         float:left  
     }
登录后复制

html


 <p class="first-p"></p>   
 <p class="second-p"></p>   
 <p class="third-p"></p>
登录后复制

 效果:

ps:p本身的大小是100,结果被放大了,和css3中的缩放有有较的却别之一:放大 缩小多少倍,就占据多大的dom空间;

css中的缩放,占据的依然是元素本身设置的width 和 height 属性滴呀

使用方式:比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。


{:;:;:;:;

       
  }{:;:;:;:;  
  }
登录后复制

上面的做法已经能解决现代浏览器上的问题了;如要要向下兼容ie6 就要加上zoom:1。

以上是css中的zoom的使用的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板