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. 小白学数据分析----->留存率与运营活动分析_I

    有关留存率的事情最近扯得比较多,因为在分析数据的时候,越发觉得,分析一定是要来解决问题的,留存率不知何时突然变得流行了,在此讨论留存率倒不是因为流行,而是觉得以留存率为核心,的确是可以帮助我们解决不少 ...

  2. 【Android】Android 移动应用数据到SD

    [Android]Android 移动应用数据到SD 在应用的menifest文件中指定就可以了,在 <manifest> 元素中包含android:installLocation 属性, ...

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

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

  4. redis的基本使用

    Redis的应用 http://www.redis.cn/commands.html http://www.cnblogs.com/ikodota/archive/2012/03/05/php_red ...

  5. db2 ha create dependency failed 解决

    db2diag.log 2014-10-16-23.27.55.009490-240 E31979E444 LEVEL: ErrorPID : 6651 TID : 140508206864160 P ...

  6. java代写

    Computer Science, Claremont McKenna CollegeCS51.2 - Introduction to Computer Science, Fall 2014Probl ...

  7. 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

    前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...

  8. leetCode191/201/202/136 -Number of 1 Bits/Bitwise AND of Numbers Range/Happy Number/Single Number

    一:Number of 1 Bits 题目: Write a function that takes an unsigned integer and returns the number of '1' ...

  9. appToken 来源

    .appToken的来源ActivityRecord, 用于在ActivityManagerService中记录Activity相关的信息(ActivityThread端 用的是ActivityCli ...

  10. Asp.net中的ajax回调模式(ICallbackEventHandler)

    客户端回调本质上就是指通过前端的客户端脚本向服务器端传递相应的数据参数,服务器端再以接受到的参数进行查询和处理,最后将结果回传到客户端进行显示.asp.net 2.0提供了实现无刷新回调的接口ICal ...