第一部分：什么是zoom?

Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。虽然此属性不可继承，但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于 currentStyle 对象而言是只读的，对于其他对象而言是可读写的。当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom：normal | <number> | <percentage>

默认值：normal

适用于：所有元素

继承性：有

2、取值：

normal：使用对象的实际尺寸。

<number>：用浮点数来定义缩放比例。不允许负值

<percentage>：用百分比来定义缩放比例。不允许负值

3、兼容性：

4、示例：

实例1：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>zoom_CSS参考手册_web前端开发参考手册系列</title>
<style>
body{line-height:1.5;}
h1{margin:0;font-size:16px;font-family:Arial;}
.test{zoom:normal;}
.test2{zoom:5;}
.test3{zoom:300%;}
</style>
</head>
<body>
<h1>zoom:normal</h1>
<div class="test">zoom:normal</div><h1>zoom:5</h1>
<div class="test2">zoom:5</div><h1>zoom:300%</h1>
<div class="test3">zoom:300%</div>
</body>
</html>

效果图如下：

实例2：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>zoom</title>
<style>body { font-size: 40px; background-color:#ff0000;}
</style>
</head>
<body style="zoom:0.5"><p>zoom实例2</p>
</body>
</html>

效果图如下：

由此可以看出：添加zoom属性的元素盒子模型的大小发生了变化，可以放大缩小。类似CSS3.0中的transform属性。

第二部分：zoom与transform:scale的区别是什么?

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>test</title><style type="text/css">body {font-weight: bold;<br>　　　　　　　　　　　　　　　　　　 font-size: 12px;}p { background-color: #f1f1f1; }.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>

效果图：

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

**第三部分：常用的*ZOOM:1是何方神圣?**

对于zoom的用法，我们最常见的并不是用来缩放的，而是用来解决ie下比较奇葩的bug。其中，* 放在css属性前面，表示这个属性仅仅应用到Internet Explorer 7 以及以下版本。*ZOOM:1可以触发ie的 haslayout属性为true。

实例1：ie7中如何兼容inline-block？

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

实例2：清除浮动

.clearfix::after {content: ".";height: 0;display: block;overflow: hidden;clear: both;
}
.clearfix {*zoom:1
}

实例3：元素的顶边界与父元素的顶边界发生叠加

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>BFC内外布局不会相互影响 </title>
</head>
<style>.container {width: 600px;height: 400px;background-color:#f1f1f1;   }.box1 {width: 200px;height: 100px;margin: 20px 0px 0px 0px;background-color:#ff67ff; *zoom:1;}.box2 {width: 100px;height: 60px;margin: 10px 10px 0px 10px;background-color: yellow;}
</style>
<body><div class="container"><div class="box1"><div class="box2">2</div></div></div>
</body>
</html>

效果如下：（在IE7之下看效果）

什么是ZOOM？ZOOM的作用是什么？相关推荐

CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
CSS兼容写法中zoom:1的作用
CSS中zoom:1的作用基本语法 zoom : normal | number 语法取值 normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1 ...
{*zoom：1} 作用
zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的放大缩小功能.比如你想让你的网页缩小 ...
{*zoom:1；}作用
{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的放大缩小功 ...
[css] 什么是zoom？它有什么作用？
[css] 什么是zoom?它有什么作用? zoom 最初是 IE 的私有属性,现在除了 Firefox 之外的浏览器基本都支持 zoom.不过,zoom 依旧不是正式的属性.与之对应的 transf ...
css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
zoom html css3,csszoom css zoom标签移动端可以用吗
zoom 在css中的意思? 首先新建一个html文件,命名为test.html. 在test.html文件内,使用div标签创建三行文字,文字内容为"百度",下面将通过zoom来 ...
鼠标滚动调整图片大小（css3 zoom 放大缩小）
文章目录 zoom 作用说明语法案例解释 onmousewheel 鼠标滚动,图片缩放鼠标滚动事件 zoom 作用说明设置或检索对象的缩放比例. normal: 使用对象的实际尺寸. <n ...
如何用qq注册zoom_如何为Zoom Meeting启用与会者注册
如何用qq注册zoom Zoom gives users the option to require attendees to register for Zoom meetings. You can ...

什么是ZOOM？ZOOM的作用是什么？