{*zoom：1} 作用

zoom:1的常见作用：

zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。

可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半，那么就在body中加入style="zoom:0.5"

设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。

通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE不行，需要触发其hasLayout属性才可以。

zoom:1就是IE6 专用的触发 haslayout 属性的。hasLayout是IE特有的一个属性。很多的IE下的css bug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。

hasLayout对于内联元素也可以有效果，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果。

通常，在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候，代码：

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

为了防止低版本的IE浏览器不支持after选择器或者某些属性，在最后加上zoom:1来清除浮动。

为了实现inline-block的兼容的时候，我们会这么写：｛display: inline-block;*display:inline;*zoom:1;｝因为在IE6、IE7下，只有设置在默认显示方式为inline的元素上才会生效。前面说过，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果，所以这样做可以达到兼容inline-block的效果。

这里还要补充一点，为什么*display:inline;*zoom:1;前面有*，*放在css属性前面，表示这个属性仅仅应用到Internet Explorer 7 以及以下版本。因为Internet Explorer 版本 7 以及以下承认非字母数字（除了下划线）前缀的属性。所以这里，IE7以上的版本作用的是display: inline-block;而在IE7及以下的版本中作用的是display:inline;zoom:1。

作用流程：

zoom是设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。

虽然此属性不可继承，但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。

此属性对于 currentStyle 对象而言是只读的，对于其他对象而言是可读写的。

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。

目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？

我们可以通过css3里面的动画属性scale进行缩放。

{*zoom：1} 作用相关推荐

html中zoom方法,css中的zoom的作用
原标题:css中的zoom的作用小标签大用处,今天重庆IT培训www.ztxuexi.cn就给大家说说css中的zoom的作用 : 1.检查页面的标签是否闭合不要小看这条,也许折腾了你两天都没有解 ...
什么是ZOOM？ZOOM的作用是什么？
第一部分:什么是zoom? Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例.设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动.火狐和老版本的webkit核心的浏览 ...
{*zoom:1；}作用
{*zoom:1;}作用 zoom:1的常见作用: zoom是IE专用属性,firefox等是不支持的.它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到. 可以让网页实现IE7中的放大缩小功 ...
CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
zoom 用法 flex zoom
1.zoom的作用:主要是设置改变已有窗体的大小; 2.实例: > 代码 < mx:Script > <! [CDATA[ p ...
浅谈 css的zoom属性
zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用. 不过值得注意的一点就是火狐浏览器不支持zoom属 ...
css中zoom的用法
zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用. 不过值得注意的一点就是火狐浏览器不支持zoom属 ...
css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
SSD之硬的不能再硬的硬核解析
本文是对经典论文 SSD: Single Shot MultiBox Detector 的解析,耗时3周完成,万字长文,可能是你能看到的最硬核的SSD教程了,如果想一遍搞懂SSD,那就耐心读下去吧~ ...
【前端面试 | css面试题整理】
层叠层叠:对一个元素多次设置同一个样式,程序只会使用最后一次设置的属性值. 优势多个文档的样式可以通过使用一个站点来控制多个html元素可以包含许多文档,可以在其中创建类对样式进行分组,最好使用选 ...

{*zoom：1} 作用

{*zoom：1} 作用相关推荐

最新文章

热门文章