ZOOM:1的原理和作用

xiaodai8580 4年前 (2021-06-18) 548℃ 0次吐槽

CSS zoom属性

zoom：设置或检索对象的缩放比例，触发IE浏览器的haslayout属性，解决浮动，margin重叠等一些问题。

zoom:1确实帮我们解决了不少ie下的bug，说一下它的来龙去脉。

Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。

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

用法：ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法

.父元素 { overflow: auto; zoom: 1 },

在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。

譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的haslayout属性等等。

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

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

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

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

语法：

zoom:normal

参数：

normal：使用对象的实际尺寸(默认值)

number：用数字来定义缩放比例，不能出现负数，

例：

zoom:5

percentage：用百分比来定义缩放比例，不能出现负数

例：

zoom:200%

zoom是IE浏览器的专用属性，以前火狐以及谷歌等一些其它浏览器是不支持的，也没有通过W3C的标准。不过现在这个属性开始标准化，已经出现在了css3的草案中。

另外：

用css中的zoom属性可以让网页实现IE7中的放大缩小功能。

比如你想让你的网页缩小为原来的一半，那么就在body中加入style="zoom:0.5"，如：

<body style="zoom:0.5">