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. CCNA实验1.port-security

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

  2. mahout分类学习和遇到的问题总结

    这段时间学习Mahout有喜有悲.在这里首先感谢樊哲老师的指导.以下列出关于这次Mahout分类的学习和遇到的问题,还请大家多多提出建议:(全部文件操作都使用是在hdfs上边进行的). (本人用的环境 ...

  3. Linux连续执行多条命令

    引自:这里 每条命令使用";"隔开,则无论前边的命令执行成功与否都会继续执行下一条命令这里,故意将第二条命令中的echo多写了一个o,命令执行出错,但并不影响后续命令的执行可以这么 ...

  4. HPUX 大文件系统扩容

    1.比对出新增加的磁盘 ioscan -fnuC disk    ioscan -m dsf         ioscan -fnC disk ioscan -m dsf 2.创建物理卷 pvcrea ...

  5. 获取发布版SHA1获取

  6. DVI-A、DVI-D、DVI-I接口定义、DVI接口图和DVI接口标准介绍

    http://blog.csdn.net/cd520yy/article/details/16993179

  7. 参照nopCommerce框架开发（NextCMS）

    很久没有更新博客了,现在已经不写.NET,转前端半年多了. 半年前在创业公司,做电子商务网站,用的是NopCommerce框架(3.2),这个框架还是相当不错的,经过一段时间的摸索,基本入门,于是就开 ...

  8. Ubuntu进不入系统，一直停留在ubuntu图标画面(转)

    Ubuntu进不入系统,一直停留在ubuntu图标画面(转) 在VMware中对Ubuntu进行“关闭电源”后,再次进入,一直停留在ubuntu的图标画面,无法进入系统了!网上也有别的网友碰到这个问题 ...

  9. 发布FTP服务，防火墙配置

    最近需要在Web服务器上发布一下FTP,不想安装Server-U之类的,就用IIS的了,安装好后,发现外网无法连接.经过测试,发现是防火墙的问题. 查找了下关于FTP的资料,ftp server支持两 ...

  10. RadioButton 的background属性表现特征

    对于radiaoButton,应该很多人都用过.下面看一个场景     上方时radiogroup,细致观察发现左1,文字开始位置和右1文字开始位置不同,这是为何呢? 查看布局: <RadioB ...