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. 100+诡异的数据集，20万Eclipse Bug、死囚遗言等

    摘要:近日,Robert Seaton整理了100多个最有趣的数据集,其中包括Jeopardy真题,死囚的最后一句话,20万个Eclipse Bug,足球比赛相关,柏拉图式的爱情,太阳系以外的行星,1 ...

  2. Codeforces Round #379 (Div. 2) E. Anton and Tree 缩点 直径

    E. Anton and Tree 题目连接: http://codeforces.com/contest/734/problem/E Description Anton is growing a t ...

  3. 含有Date和Timestamp的Java和Json互相转化

    工程 代码 package com.my.json.helper; import java.text.DateFormat; import java.text.SimpleDateFormat; im ...

  4. Asp.net Core WebApi 使用Swagger做帮助文档，并且自定义Swagger的UI

    WebApi写好之后,在线帮助文档以及能够在线调试的工具是专业化的表现,而Swagger毫无疑问是做Docs的最佳工具,自动生成每个Controller的接口说明,自动将参数解析成json,并且能够在 ...

  5. mvc 返回 xml

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  6. MX5 ADB 链接error: device not found

    这个问题郁闷了好久,因为事情比较忙也没时间解决.每次是开启360 一键 root 勉强调试.今天狠下心把它解决了.解决办法有以下几个步骤: 1.连接方式改成 “内置光盘”,这样手机第一次连接会安装驱动 ...

  7. dede教程之后台登录是自动跳出解决方法

    有时也不知道什么原因,登录后台时输入全部正确点确认按钮时却会自动跳出.必须输入http://你的域名/dede/login.php才可以登录.通过尝试最终解决了问题,下面分享出来: 1.打开根目录da ...

  8. data-role参数表：

    data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header     页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等 ...

  9. SQL Server 数据库操作类

    /// <summary> /// SQLServerHelper的摘要说明. /// </summary> public class SQLServerHelper { pu ...

  10. ubuntu下搭建lamp

    一.使用apt-get方式为Ubuntu安装PHP+MYSQL+Apache   分别执行如下命令:   (1)安装MYSQL   sudo apt-get install mysql-server ...