说一下zoom:1的原理，万一被问到呢？
某一天，前同事低着头从鹅厂面试回来。他说他被一道很常见的问题难倒了。
对方问他知道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: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。
博主相关文章推荐：
移动端上下滑动事件之--坑爹的touch.js
轻轻谈一下seaJs——模块化开发的利器
有趣的前端题目，看了不后悔
移动端前端开发概述
浅谈 标签的语义化
浅谈鼠标滚轮事件
不积跬步无以至千里----高度自适应的textarea
sass和less，优秀的前端样式预处理器
视差滚动的那些事儿
说一下zoom:1的原理，万一被问到呢？相关推荐
- ZOOM:1的原理和作用
zoom:1确实帮我们解决了不少ie下的bug,但是它的来龙去脉,又有多少人知道呢? 所以我老生常谈,说一下它的来龙去脉. Zoom属性是IE浏览器的专有属性, 它可以设置或检索对象的缩放比例. 在平 ...
- zoom:1的原理及用法
面试常问的一个问题 zoom:1 的作用,很多人都知道是清除浮动,触发IE的haslayout属性 但是你知道zoom:1的工作原理和来龙去脉吗? zoom:1 确实帮我们解决了不少ie下的bug,但 ...
- jdbc 自增id 原理_给“小白”漫画+图示讲解MyBatis原理，就问香不香!
MyBatis一款后起之秀的持久层框架ORM,支持自定义SQL.存储过程和高级映射,相对于Hibernate算是半自动化的框架,在国内行业内非常流行. 常规的JDBC操作,配置相应的数据库连接的信息, ...
- 进出仓原理_你问我答 | 球磨机组成和工作原理?
壹 问 问题1:球磨机组成和工作原理? 壹 答 回答1: 一.球磨机工作原理: 该球磨机的主要工作部分是一个装在两个大型轴承上并水平放置的回转圆筒,筒体用隔仓板分成几个仓室,在各仓内装一定形状和大小的 ...
- 面试官问 async、await 函数原理是在问什么？
大家好,我是若川.这是 源码共读活动<1个月,200+人,一起读了4周源码> 第四期,纪年小姐姐的第四次投稿.纪年小姐姐通过本次学习提早接触到generator,协程概念,了解了async ...
- 【OFDM系列8】对知乎“正交频分复用(OFDM)原理灵魂9问”的理解与通俗易懂回答(慎入，含大量重要公式详细推导的万字长文)
前段时间,在知乎上看到一篇文章: 正交频分复用(OFDM)原理 文中博主提出了关于OFDM的九个问题,看了之后感觉这些问题的确深入OFDM本质,仔细思考可以很好地加深对OFDM这种较为复杂的调制方式的 ...
- 分析Volatile的作用及底层实现原理，面试问一点都不慌！
文章简介 分析volatile的作用以及底层实现原理,这也是大公司喜欢问的问题 内容导航 volatile的作用 什么是可见性 volatile源码分析 01.volatile的作用 在多线程中,vo ...
- 【知识点】OkHttp 原理 8 连问
前言 OkHttp可以说是Android开发中最常见的网络请求框架,OkHttp使用方便,扩展性强,功能强大,OKHttp源码与原理也是面试中的常客. 但是OKHttp的源码内容比较多,想要学习它的源 ...
- Vue双向数据绑定原理(面试必问)
答案: vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监 ...
最新文章
- shell编程_linux
- (转)个例子让你了解Java反射机制
- 使用js代码将HTML Table导出为Excel
- ./include/caffe/util/cudnn.hpp: error: too few arguments to function ‘SetPooling2dDescriptor
- JSON.parse和JSON.stringify 参数详解
- 问题 A: 阿正的忐忑不安（C语言）
- Spring Cloud-honghu Cloud分布式微服务云系统
- IFrame与window对象(contentWindow)
- 做独一无二的自己，颜宁西湖大学问答全记录
- mac 您没有权限打开应用程序_Mac应用程序无法打开或文件损坏的处理方法
- linux I2C 驱动
- mac latex与texstudio安装
- 形态学在图像处理中的应用
- PowerBuilder 10 下调用FoxitPDFSDK_AX_Pro.ocx浏览打印PDF文件
- 考研邱关源电路总结第一章
- 计算机科学导论+刘艺+pdf,计算机科学导论(机械工业出版社)刘艺 瞿高峰 习题答案.doc...
- 分享一个美团大佬的面试笔记 - MySQL 30 问与答
- Certbot 生成 ssl 证书
- 如何在标签打印软件里面插入动态图片
- 搭建openlab网站
热门文章
- 关于微功率短距离无线电发射设备，无需做SRRC认证
- YV12toI420 yuv420、NV12、YV12相互转换
- html5数字色板,推荐10款色板源码（收藏）
- win10 win 7系统 windows无法访问\\请检查名称拼写(基本上非重装系统外的终极解决方式)win7 , win10均可
- JAVA计算机毕业设计新疆旅游专列订票系统Mybatis+源码+数据库+lw文档+系统+调试部署
- 一款好看，有科技感的动态背景线条动态效果代码
- 旧路由器改装无线打印服务器,旧路由器改wifi放大器详细教程【图】
- 标定中的zoomfocus
- vscode 逗号不换行_苹果手机九宫格怎么换行 苹果手机九宫格换行操作步骤
- Vitalik万字长文：困扰加密货币的硬核难题五年后都怎么样了？