某一天。前同事低着头从鹅厂面试回来。他说他被一道非经常见的问题难倒了。

对方问他知道zoom：1的作用吗？

前同事：清楚浮动啊,触发haslayout。

再问：那你知道zoom:1的工作原理和来龙去脉吗？

前同事：......

zoom:1确实帮我们攻克了不少ie下的bug，可是它的来龙去脉，又有多少人知道呢？

所以我老生常谈，说一下它的来龙去脉。

Zoom属性是IE浏览器的专有属性。它能够设置或检索对象的缩放比例。先来一张来自度娘的截图

在寻常的css编写过程中。zoom:1可以比較奇妙地解决ie下比較奇葩的bug。

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

来龙去脉大概例如以下：

度娘告诉我们：zoom是设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致围绕对象的内容又一次流动。

尽管此属性不可继承。可是它会影响对象的全部子对象( children )。这样的影响非常像 background 和 filter 属性导致的变化。

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

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

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

眼下非ie因为不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？

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

好了。粗劣地说了一下zoom的来龙去脉，如有不对的地方。望多多不吝赐教。假设认为有收获，请多多留言。

Author: Alone

Antroduction: 高级前端开发project师

Sign: 人生没有失败，仅仅有没到的成功。

博主相关文章推荐：

移动端上下滑动事件之--坑爹的touch.js

轻轻谈一下seaJs——模块化开发的利器


有趣的前端题目，看了不懊悔

移动端前端开发概述

浅谈
标签的语义化

浅谈鼠标滚轮事件

不积跬步无以至千里----高度自适应的textarea

sass和less，优秀的前端样式预处理器

视差滚动的那些事儿


说一下zoom:1的原理，万一被问到呢？的更多相关文章

  1. Unreal Engine 4 C++ 能够创建角色Zoom摄像头(资源)

    游戏摄像头可以观察到的距离越近,作用和拉远是一个比较普遍的要求,UE4它也实现比较简单. 在这篇文章中TopDown模板案例,解释如何,分步实施能Zoom摄像头. 创建TopDown模板C++项目达产 ...

  2. 跟vczh看实例学编译原理——二：实现Tinymoe的词法分析

    文章中引用的代码均来自https://github.com/vczh/tinymoe.   实现Tinymoe的第一步自然是一个词法分析器.词法分析其所作的事情很简单,就是把一份代码分割成若干个tok ...

  3. Java并发（六）：volatile的实现原理

    synchronized是一个重量级的锁,volatile通常被比喻成轻量级的synchronized volatile是一个变量修饰符,只能用来修饰变量. volatile写:当写一个volatil ...

  4. Java并发（五）：synchronized实现原理

    一.synchronized用法 Java中的同步块用synchronized标记. 同步块在Java中是同步在某个对象上(监视器对象). 所有同步在一个对象上的同步块在同时只能被一个线程进入并执行操 ...

  5. Java面试底层原理

    面试发现经常有些重复的面试问题,自己也应该学会记录下来,最好自己能做成笔记,在下一次面的时候说得有条不紊,深入具体,面试官想必也很开心.以下是我个人总结,请参考: HashSet底层原理:(问了大几率 ...

  6. ArrayList使用及原理

    之前面试时,经常被问到ArrayList的原理,今天整理了一些ArrayList的使用原理和必问的知识点. ArrayList的继承关系 定义一个ArrayList的方法 ArrayList的三个构造 ...

  7. 盘点 HashMap 的实现原理及面试题

    1.请你谈谈 HashMap 的工作原理如果被问到 HashMap 相关的问题,它的工作原理都会被作为面试的开场白,这个时候先装作若有所思的样子冷静一下.首先 HashMap 是基于 hashing ...

  8. vue基础-动态样式&表单绑定&vue响应式原理

    动态样式 作用:使用声明式变量来控制class和style的值 语法: :class/:style 注意:尽可能不要把动态class和静态class一起使用,原因动态class起作用的时间会比较晚,需 ...

  9. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

随机推荐

  1. 【转】python2与python3的主要区别

    摘自:http://www.cnblogs.com/codingmylife/archive/2010/06/06/1752807.html 1.性能 Py3.0运行 pystone benchmar ...

  2. 【转】SQL SERVER 获取存储过程返回值

    1.OUPUT参数返回值 CREATE PROCEDURE [dbo].[nb_order_insert]( @o_buyerid int , @o_id bigint OUTPUT ) AS BEG ...

  3. [k8s]prometheus+grafana监控node和mysql(普罗/grafana均vm安装)

    https://github.com/prometheus/prometheus Architecture overview Prometheus Server Prometheus Server 负 ...

  4. ssh 连 koding

    2014.12.10更新可用方法 koding是一个在线的开发平台.让自己从开发平台中释放出来.除了提供在线编程功能之外,Koding还有强大的社区功能,允许开发者通过相互浏览.交换代码而达到项目协作 ...

  5. Linux /proc目录详解

    Linux系统上的/proc目录是一种文件系统,即proc文件系统.与其它常见的文件系统不同的是,/proc是一种伪文件系统(也即虚拟文件系统),存储的是当前内核运行状态的一系列特殊文件,用户可以通过 ...

  6. mac下framework联编需要设置的

    点击target,然后,在Build Phases里的空白处用鼠标点一下(艹 变态) 这时,点最上面菜单:Editor/Add Build Phases/Add Copy Files Build Ph ...

  7. Ribbon重试机制与Hystrix熔断机制的配置问题

    Ribbon超时与Hystrix超时问题,为了确保Ribbon重试的时候不被熔断,我们就需要让Hystrix的超时时间大于Ribbon的超时时间,否则Hystrix命令超时后,该命令直接熔断,重试机制 ...

  8. Ubuntu和Busybox下用make menuconfig配置出错解决

    http://blog.csdn.net/satiling/article/details/6965985 # make menuconfig In file included from script ...

  9. C#中一道关于多线程的基础练习题——模拟仓库存销过程

    题目:模拟生产.入库.销售(50分) 假设某企业自产.自存.自销,需要将工厂生产的各类产品不定时的运到仓库,与此同时,需要将仓库中的货物运往超市和商场中进行销售,请编写一个程序模拟此过程(主要是存取这 ...

  10. Python中写一个乒乓球类的游戏

    最近开始学Python,感觉挺好玩的,既有脚本语言的灵活性,又有丰富的类库与面向对象的特点,开发起来很方便. 游戏的规则和乒乓球一样,如果妙蛙种子掉地上了就算输,你可以用蓝色的跷跷板弹它,使他不落到地 ...