CSS中zoom和scale的区别

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

zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。
运行<!DOCTYPE html>

<style>
div {width:300px;height:100px;border:1px solid #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 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上不支持，但这是个很古老的特性了。

它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果。

转自：http://www.cnblogs.com/qingxinblog/articles/4495393.html

转载于:https://www.cnblogs.com/qijuzi/p/7151036.html

CSS中zoom和scale的区别相关推荐

css中zoom和scale
css中我们常用来缩放的样式元素是transform:scale: 也还有我们不熟悉的zoom,在实际的应用场景中,我们需要根据自身项目的需要,结合不同的解决方案的优缺点来选择适合我们项目解决方案. ...
css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
css里dotted,CSS中dashed和dotted的区别有哪些
对于刚刚接触css的朋友们来说都会分不清dashed和dotted,那么你知道CSS中dashed和dotted的区别有哪些吗?那么针对这个问题爱站小编就为大家接受CSS中dashed和dotted的 ...
CSS中background与background-image的区别
CSS中background与background-image的区别 1.如果只是设置两张背景图不涉及CSS样式那么两者都可以使用 2.如果设置样式那就只能用background,如以下是不适用ba ...
请问下谁知道，column-tree.css中zoom是什么意思，在下面这代码里面起什么作用？...
请问下谁知道,column-tree.css中zoom是什么意思,在下面这代码里面起什么作用? .x-column-tree .x-tree-node { zoom:0; } .x-column-tr ...
html中zoom方法,CSS中zoom属性或overflow:auto的使用方法
这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下. 前言其实在CSS中的 ...
CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
CSS中zoom和transform:scale的区别
原文地址:http://www.cnblogs.com/foodoir/p/5821018.html 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inli ...

CSS中zoom和scale的区别

CSS中zoom和scale的区别相关推荐

最新文章

热门文章