CSS中zoom和scale的差异

时间: 2019-11-27阅读: 86标签: 区别

先说原理

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>

html

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


zoom与scale的区别总结  

1、兼容性的差异:zoom为非标准属性,除firefox浏览器已在其他浏览器中得到了良好支持,scale已经是标准属性除IE8-外现代浏览器均能较好的支持;

2、取值差异:zoom的合法值可以为数值、百分比以及normal而scale则只能为数值;  

3、缩放中心点差异:zoom缩放中心点为左上角,而scale默认为中心点但可以通过transform-origin进行改变;  

4、重绘差异:zoom的缩放改变了元素占据空间的大小会引起整个页面的重绘而scale缩放所占据的原始尺寸不变,只在当前元素进行重绘; 

5、渲染计算方法可能有差异:zoom为锐化,而scale为模糊; 

6、对文字的缩放规则不一致:zoom的缩放依然受限于最小12px的中文大小限制;而scale就是纯粹就图形进行比例控制,文字50%原来尺寸; 

 7、这点应该是与上一条相似,border为1px的时候zoom受限于浏览器最小显示1px;而scale就纯粹进行比例控制,不受限。 

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/6655

package.json中^和~的区别

webpack 项目的package.json 文件列出了项目所依赖的插件和库,同时也给出了对应的版本说明,但是在版本说明前面还有个符号:‘^‘(插入符号)和‘~‘(波浪符号),总结了下他们之间的区别:

js中.和[]的区别

在js中,对象属于是键值对的集合,在上面这个代码中,name就属于是key,而‘残梦‘就是value。总之一句话: []更强大,.就是用起来更加习惯一些,一开始用[]的时候总是会当成数组,需要注意一下

梳理AMD、CMD、CommonJS、ES6 Module的区别

AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制。后来由该草案的作者以RequireJS实现了AMD规范,所以一般说AMD也是指RequireJS。

前端开发和后端开发都是干什么的?有哪些区别?

前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有巨大的区别

深入理解link和@import到底有什么区别?

而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式。那么同样是引入外部样式,这两者有什么区别呢,下面请跟随我来详细了解一下link和@import的区别吧!

CSS隐藏元素的方法及区别

opacity:0将元素本身及其子元素都置为不可见的;visibility:hidden将元素本身及其子元素都置为不可见的;display:none使用这个属性,被隐藏的元素对网页的布局不起作用。

@import和link引入样式的区别

最近在做知识体系的复盘,在复盘的时候尽可能的查漏补缺。关于@import和link引入样式的区别网上有很多种说法。大致有如下几种,不过这其中会有我存疑的地方,我们可以一起来探讨一下。

innerHTML、outerHTML、innerText、outerText的区别

innerHTML设置或获取位于对象起始和结束标签内的 HTML;outerHTML设置或获取对象及其内容的 HTML 形式;innerText 设置或获取位于对象起始和结束标签内的文本;outerText 设置(包括标签)或获取(不包括标签)对象的文本

textContent、innerText、innerHTML的区别和差异

textContent属性可以获取指定节点的文本及其后代节点中文本内容,也包括<script>和<style>元素中的内容; innerText也是获取指定节点的文本及其后代节点中文本内容,但不能获取<script>和<style>元素中的内容。 innerHTML是获取HTML文本结构内容

<script>属性async和defer的区别

async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效。defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全