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上不支持，但这是个很古老的特性了。它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果。
CSS中zoom和scale的区别的更多相关文章
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- css中zoom:1以及z-index的作用
一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,mar ...
- CSS中zoom:1的作用 ，小标签大作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- (转载)CSS中zoom:1的作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- CSS中 Zoom属性
CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- css 中 zoom和transform:scale的区别(转载)
一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...
- CSS中的class与id区别及用法
转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
随机推荐
- Windows查看电脑上安装的.Net Framework版本的五种方法（转）
1.查看安装文件判断Framwork版本号 打开资源管理器,比如我的电脑,再地址栏输入%systemroot%\Microsoft.NET\Framework后单击“转到”或者按回车. 在新文件夹中查 ...
- C++匈牙利命名法
匈牙利命名法 匈牙利命名法是一种编程时的命名规范.基本原则是:变量名＝属性+类型+对象描述,其中每一对象的名称都要求有明确含义,可以取对象名字全称或名字的一部分.命名要基于容易记忆容易理解的原则.保证 ...
- U盘量产的作用
优盘量产:字面意思就是,批量生产优盘.是指批量对U盘主控芯片改写数据,如,写生产厂商信息.格式化等.而用来对U盘完成该操作的软件程序,顾名思义就是U盘量产工具. U盘量产的作用: 电脑正确识别 ...
- 分享一个用安卓手机就能引导pc安装linux系统办法
1.首先安卓手机下载软件DriveDroid.apk http://pan.baidu.com/s/1qW4pbT6 2.下载linux镜像文件放手机存储卡存储,放到Download/images/以 ...
- J2EE学习的一部分--JDBC详细说明
今天是关于我们JDBC相关知识,左右JDBC我想大家都很熟悉的,我记得在很早以前就开始使用它,我记得那是一个大二的学生做课程设计.但随后以完成任务,所以遇到的问题google,当时没有时间组织,下关于 ...
- session劫持以及预防
session劫持是一种广泛存在的比较严重的安全威胁,在session技术中,客户端和服务端通过session的标识符来维护会话, 但这个标识符很容易就能被嗅探到,从而被其他人利用.它是中间人攻击的一 ...
- 《JavaScript 闯关记》
为何写作此课程 stone 主要负责基于 Web 的企业内部管理系统的开发,虽然能够熟练地使用 JavaScript,但随着对 JavaScript 的理解越来越深,才发现自己尚未掌握其精髓. 201 ...
- 开启MSSQLServer跨服务器查询功能
首先在MSSQL客户端中进行如下图文操作配置 其次使用脚本进行操作配置 ---开启SQLServer 跨服务器查询功能 exec sp_configure 'show advanced options ...
- L8_2
4.留下pid为12345的那个sh进程,杀死系统中所有其它sh进程 ps –ef|grep sh |awk ‘{if($2!=”12345”) {print “kill “$2}}’ >kil ...
- 在Linux上使用cmake创建CodeBlocks工程
最近在linux上使用cmake,对于使用GUI习惯的还真不能适应,真是想尽一切办法把原来使用cmake的工程创建成CodeBlocks工程.工程小了还能接受,工程大了太麻烦了. 看了一下cmake的 ...