CSS中zoom和scale的区别是什么

这篇文章主要介绍“CSS中zoom和scale的区别是什么”，在日常操作中，相信很多人在CSS中zoom和scale的区别是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS中zoom和scale的区别是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。

　　csszoom怎么运行

　　运行<!DOCTYPEhtml>

　　<style>

　　div{

　　width:300px;height:100px;

　　border:1pxsolid#CCC;

　　font-size:0px;

　　line-height:100px;

　　margin:10px;

　　}

　　span{

　　display:inline-block;

　　height:80px;width:200px;background:#F5F5F5;

　　vertical-align:middle;

　　overflow:hidden;

　　}

　　</style>

　　<div>

　　<span></span>

　　</div>

　　<div>

　　<spanstyle="

　　-webkit-transform-origin:topleft;

　　-webkit-transform:scale(0.5);

　　"></span>

　　</div>

　　<div>

　　<span></span>

　　</div>

　　csszoom测试怎样

　　第一个测试中只设置了scale，于是元素以自己的中心为基点做缩放。第二个测试中不仅设置了scale，还有origin来将缩放的基点设置到左上角，因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高，当它并没有在容器里居中，因为scale是先布局后变换的，变换不会对布局产生影响。最后一个测试是使用zoom，虽然Firefox上不支持，但这是个很古老的特性了。它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果。

到此，关于“CSS中zoom和scale的区别是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！