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. Python LDAP中的时间戳转换为Linux下时间

    (Get-ADUser zhangsan -Properties badpasswordtime).badpasswordtime返回值为:131172610187388712131172610187 ...

  2. Atlas+Keepalived系列二：管理Atlas

    1:登录代理端口1234 [root@localhost bin]# mysql -uroot -p -P1234 -h127.0.0.1 proxy-address项配置,例如proxy-addre ...

  3. Ay.Framework.WPF 2.0建立项目到底有多快

    2015-3-31 今天我已经优化了很多地方,让客户使用起来几乎是傻瓜式使用了,废话不多说,我们开始吧. 默认的我提供了一些图片,但是也只占用了8M多,2.0版本目前总共有45M左右大小,毕竟包含了f ...

  4. web开发中的 emmet 效率提升工具

    web开发中的 emmet 效率提升工具 可以用来快速生成html 代码. 并且给各种IDE.编辑器提供了插件支持,sublime ,webstorm等. 如在webstorm中安装好emmet之后, ...

  5. window下，加载redis拓展

    下载地址: http://windows.php.net/downloads/pecl/snaps/redis/2.2.5/ 看下自己phpinfo的信息          就选择   ts-x86 ...

  6. linux red hat 安装svn

    安装步骤如下: 1.yum install subversion   2.输入rpm -ql subversion查看安装位置,如下图:   我们知道svn在bin目录下生成了几个二进制文件. 输入 ...

  7. javascript 的一些理解和随笔

    一.iframe里面的页面调用父窗口,左右窗口js函数的方法 iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如 ...

  8. POJ-1475-Pushing Boxes(BFS)

    Description Imagine you are standing inside a two-dimensional maze composed of square cells which ma ...

  9. file_get_contents()获取https出现这个错误Unable to find the wrapper “https” – did

    file_get_contents()获取https出现这个错误Unable to find the wrapper “https” – did 解决办法 ,如果你是用的服务器,可以参考这个办法,修改 ...

  10. Http 1.1协议

    HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间数据交换的过程. 1.Http1. ...