CSS中两种放大zoom和scale的区别

####欢迎访问我的个人博客 http://xiaolongwu.cn/

先说原理

zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。

zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。

另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。

我们看个例子

这是几行伪代码

   <style>
	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>

<div>
  <span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
  <span style="
    -webkit-transform-origin:top left;
    -webkit-transform:scale(0.5);
  "></span>
</div>
<div>
  <span style="zoom:0.5;">
  </span>
</div>

下面看效果

稍微解释一下

第一个测试中只设置了scale，于是元素以自己的中心为基点做缩放。

第二个测试中不仅设置了scale，还有origin来将缩放的基点设置到左上角，因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高，当它并没有在容器里居中，因为scale是先布局后变换的，变换不会对布局产生影响。

最后一个测试是使用zoom，虽然Firefox上不支持，但这是个很古老的特性了。它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果。

---

github文章资源地址：CSS中两种放大zoom和scale的区别

我的CSDN博客地址：https://blog.csdn.net/wxl1555

如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。

邮箱：wuxiaolong802@163.com