CSS中zoom和scale的差异

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

先说原理

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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

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

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

TCP 与 UDP的区别

UDP是User Datagram Protocol的简称,中文名是用户数据报协议,是OSI参考模型中的传输层协议,它是一种无连接的传输层协议,不会对报文进行任何拆分和拼接操作,提供面向事务的简单不可靠信息传送服务

display:none和visibility:hidden两者的区别

使用css让元素不可见的方法有很多种,裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。

Async/await 和 Promises 区别

Async/await 是建立在 Promises上的,不能被使用在普通回调以及节点回调,Async/await 和 Promises 很像,不阻塞,Async/await 代码看起来像同步代码。

let 和 const 的区别及语法

const如何做到变量在声明初始化之后不允许改变的?其实const保证的不是变量的值不变,而是保证变量指向的内存地址所保存的数据不允许改动。此时,简单类型和复合类型保存值的方式是不同的。

node全局安装与本地安装的区别

node的安装有全局安装和本地安装两种方式。命令中,全局安装(global)和本地安装(local)方式的区别为带参数-g和不带参数-g。下面我们来看一下具体的区别。

js中require和import的区别

当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句,下文将介绍这两种方式的不同之处。

css中word-spacing和letter-spacing的区别是什么?

CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。

http中长连接和websocket的长连接的区别

HTTP是一个应用层协议,无状态的,端口号为80。主要的版本有1.0/1.1/2.0.HTTP/1.1 串行化单线程处理,可以同时在同一个tcp链接上发送多个请求,但是只有响应是有顺序的,只有上一个请求完成后,下一个才能响应。

Vue的computed和watch的使用和区别

模板内表达式非常便利,可用于简单计算,当模板内放入太多的逻辑时,模板会过重且难以维护;可以使用computed替代

js对象属性通过“.”和“[ ]”访问的区别

(.) 点操作符: 静态的。右侧必须是一个以属性名称命名的简单标识符。属性名用一个标识符来表示。标识符必须直接出现再js程序中,它们不是数据类型,因此程序无法修改它们。([]) 中括号操作符: 动态的。方括号里必须是一个计算结果为字符串的表达式

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

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

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