zoom和scale的区别

【原理】

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上不支持，但这是个很古老的特性了。它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果

猜你喜欢