【原理】
zoom和scale都是用于对元素的缩放,但两者存在诸多差异
①兼容问题;
②渲染顺序及对布局(盒子)影响;
先说一下兼容问题:
zoom属是IE浏览器的专有属性(这句话不太正确,因为新版主流浏览器也开始兼容zoom属性),但是记住火狐和老版本的webkit核心的浏览器任不支持这个属性。
而scale属性是在 CSS 3.0 规范草案中新出的对zoom的标准化,通过css3里面的动画属性scale进行缩放
下面说下渲染顺序及对布局(盒子)影响:
【通俗理解】就是zoom是先渲染(缩放)后布局,可能影响盒子计算;而scale是先布局后渲染(缩放),故而不会影响布局(盒子计算)
具体表现为:
zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置
另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>zoom与scale区别</title> <style> *{ margin:0; padding:0; font-size:12px; } div { width:300px;height:100px; border:1px solid red; font-size:0px; line-height:100px; margin:10px; } span { display:inline-block; height:80px;width:200px;background:blue; vertical-align:middle; overflow:hidden; } </style> </head> <body> <div> 1.<span style="-webkit-transform:scale(0.5);"></span> </div> <div> 2.<span style="-webkit-transform-origin:top left;-webkit-transform:scale(0.5);"></span> </div> <div> 3.<span style="zoom:0.5;"> </span> </div> </body> </html>
下面看效果吧:
【稍微解释一下】
第一个测试中只设置了scale,于是元素以自己的中心为基点做缩放;
第二个测试中不仅设置了scale,还有origin来将缩放的基点设置到左上角,因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高,当它并没有在容器里居中,因为scale是先布局后变换的,变换不会对布局产生影响;
最后一个测试是使用zoom,虽然Firefox上不支持,但这是个很古老的特性了。它和第二个测试的区别是它先缩放,后计算布局。所以在例子中它得到了垂直居中效果
.