css中zoom和transform:scale的区别

关于zoom：

　　以前只是看到别人的代码中用过zoom，自己从未使用过，今天在探究ie7兼容inline-block时，发现里面提到了zoom。下面开始进行对zoom的探究。

　　zoom：normal | <number> | <percentage>
　　　　默认值：normal
　　　　适用于：所有元素
　　　　继承性：有
　　　　动画性：是
　　　　计算值：绝对长度
　　取值：
　　　　normal：
   　　　　　　 使用对象的实际尺寸。（等同于zoom:1）
　　　　<number>：
  　　　　　　  用浮点数来定义缩放比例。不允许负值
　　　　<percentage>：
    　　　　　　用百分比来定义缩放比例。不允许负值

　　兼容性：

　　zoom的字面意思是“变焦”，摄影的时候常用到的一个概念。对于web上的zoom效果，你也可以按照此概念理解。可以改变页面上元素的尺寸，属于真实尺寸。在以前，zoom可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。

关于transform:scale

　　transform:scale是css3变形中的缩放

　　语法为：transform: scale(<x> [<y>]). 同时有scaleX, scaleY专门的x, y方向的控制。（这里不专门介绍transform:scale）
　　和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数，没错，负数。而zoom不能是负值！

那么，二者之间还有什么不同呢？

　　下面我们通过具体例子来比较：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<style type="text/css">
			body{
				font-weight: bold;　　　　　　　　　　　　　　　　　　 font-size: 12px;
			}
			p{
				background-color: aqua;
			}
			.zoom-half { zoom: 0.5; }
			.scale-half { transform: scale(0.5); }
		</style>
	</head>
	<body>
		<p>图片zoom: 0.5;</p>
		<p><img src="3.jpg" class="zoom-half"></p>
		<p>图片transform: scale(0.5);</p>
		<p><img src="3.jpg" class="scale-half"></p>
		<p>容器(含图文)zoom: 0.5;</p>
		<p class="zoom-half">foodoir<br><img src="3.jpg"></p>
		<p>容器(含图文)transform: scale(0.5);</p>
		<p class="scale-half">foodoir<br><img src="3.jpg"></p>
	</body>
</html>

　　为了使结果更加更加清晰，在这里给p标签加上了背景色，结果显示如图：

从上述例子我们可以看出如下几点差异：
    1、zoom的缩放是相对于左上角的；而scale默认是居中缩放；
    2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
    3、zoom和scale对元素的渲染计算方法可能有差异（需要自己动手，用高清图，仔细去看其中的区别）。
    4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。

后面呢，回到最之前想要解决的问题：ie7中如何兼容inline-block？

　　方法：首先将其变成行内元素，使用具有行内元素的特性，然后触发haslayout，使其具体块级元素的特性，如此就可以得到想要的效果了

　　代码：

　　　　div{
   　　　　 display:inline-block;
  　　　　  *display:inline;
  　　　　  zoom:1;
　　　　}

暂时就学这么多关于它们之间的区别，以后发现问题还是会继续更新……

　　

css中zoom和transform:scale的区别的更多相关文章

  1. css 中 zoom和transform:scale的区别(转载)

    一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...

  2. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  3. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  4. zoom和transform:scale()的区别

    zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来 ...

  5. 2D转换下的zoom和transform:scale的区别

    一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...

  6. zoom与transform:scale的区别

    一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal ...

  7. zoom，zoom与haslayout的关系，zoom与transform: scale( )的区别

    1.zoom:(缩放)

  8. css中zoom:1以及z-index的作用

    一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,mar ...

  9. CSS中zoom:1的作用 ，小标签大作用

    CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...

随机推荐

  1. linux上nginx+apache 搭建 svn服务器

    众所周知,nginx目前是不支持svn的,并且由于机房网络只开了80和22(ssh)端口,所以这时候就没法单独在服务器上搭建apache+svn .所以就产生了 nginx + apache + sv ...

  2. CCNA实验1.port-security

    一, 二,MAC地址绑定 3550-1#conf t3550-1(config)#int f0/13550-1(config-if)#switchport mode access /指定端口模式.35 ...

  3. Java和Android文件操作

    File这是文件基类,抽象地代表一个文件实体,它有四个不同的构造方法: File(File dir, String name)  File(String path)   File(String dir ...

  4. P2P资料

    常用链接 openstack创建实例的方法 http://www.cnblogs.com/popsuper1982/p/3800426.html qemu官网 http://wiki.qemu.org ...

  5. Hadoop源代码中的build-main.xml

    在Hadoop的每一个Project中,都有build-main.xml,如下图所示: 这个文件其实是通过maven-ant插件生成的,在hadoop的每一个Maven工程中,都有一个pom文件,在p ...

  6. LCLFramework框架之IOC

    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 借助于"第三方"实现具有依赖关系的对象之间的解 ...

  7. TypeError: Cannot read property 'root' of null

    解决办法: brew upgrade watchman

  8. [原]cocos2d-lua 常用法汇总

    1.CCEditBox local back = CCScale9Sprite:create("res/ui/images/im_02.png", CCRect(20, 20, 1 ...

  9. nginx 相关问题

    Nginx配置文件nginx.conf 参考:http://www.2cto.com/os/201212/176520.html Nginx自动切分日志: nignx没有自动分开文件存储日志的机制. ...

  10. 安装vs2013以后,链接数据库总是报内存损坏,无法写入的错误

    安装vs2013以后,链接数据库总是报内存损坏,无法写入的错误 这个错误几个月以前解决过一次,但是到又碰到的时候,竟然完全忘记当时怎么解决的了, 看来上了年纪记忆真是越来越不行了... 解决方案很简单 ...