zoom:1的原理及用法

最新推荐文章于 2022-12-06 15:01:47 发布

Dream_ling

最新推荐文章于 2022-12-06 15:01:47 发布

阅读量3.2k

点赞数 1

分类专栏：前端文章标签： css3 前端面试

本文链接：https://blog.csdn.net/Dream_ling/article/details/119748866

版权

4 篇文章 1 订阅

订阅专栏

面试常问的一个问题 zoom:1 的作用，很多人都知道是清除浮动,触发IE的haslayout属性

但是你知道zoom:1的工作原理和来龙去脉吗？

zoom:1 确实帮我们解决了不少ie下的bug，但是它的原理，又有多少人知道呢？

所以下面来说一下它的来龙去脉

【简介】

zoom属性是IE浏览器的专有属性（亲测后新版chrome和Opera也支持），它可以设置或检索对象的缩放比例，也就是作用在于缩放元素，目前为止，wekbit系列、ie系列（ie6~ie11）均支持。

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

【适用场景】

经常用来解决一些ie特有的bug，但是写css时在什么地方要写它呢？

当IE遇到问题的时候，尤其是IE67，zoom:1 可以激活BFC，然后激活BFC后就可以解决好多问题

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

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

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

通常，在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候，我们会这么写

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

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

总结：

①zoom属是IE浏览器的专有属性（这句话不太正确，因为新版主流浏览器也开始兼容zoom属性），但是记住火狐和老版本的webkit核心的浏览器仍不支持这个属性。

②zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中，并且通过css3里面的动画属性scale进行缩放。但zoom与scale两种css缩放存在差异。

关注