CSS中zoom和scale的区别
zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。运行<!DOCTYPE html>
<style>
div {
width:300px;height:100px;
border:1px solid #CCC;
font-size:0px;
line-height:100px;
margin:10px;
}
span {
display:inline-block;
height:80px;width:200px;background:#F5F5F5;
vertical-align:middle;
overflow:hidden;
}
</style>
<div>
<span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
<span style="
-webkit-transform-origin:top left;
-webkit-transform:scale(0.5);
"></span>
</div>
<div>
<span style="zoom:0.5;"></span>
</div>
第一个测试中只设置了scale，于是元素以自己的中心为基点做缩放。第二个测试中不仅设置了scale，还有origin来将缩放的基点设置到左上角，因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高，当它并没有在容器里居中，因为scale是先布局后变换的，变换不会对布局产生影响。最后一个测试是使用zoom，虽然Firefox上不支持，但这是个很古老的特性了。它和第二个测试的区别是它先缩放，后计算布局。所以在例子中它得到了垂直居中效果。
CSS中zoom和scale的区别的更多相关文章
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- css中zoom:1以及z-index的作用
一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,mar ...
- CSS中zoom:1的作用 ，小标签大作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- (转载)CSS中zoom:1的作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- CSS中 Zoom属性
CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...
- CSS中rem、em的区别
引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...
- css 中 zoom和transform:scale的区别(转载)
一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: z ...
- CSS中的class与id区别及用法
转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
随机推荐
- wikioi1688 求逆序对
题目描述 Description 给定一个序列a1,a2,…,an,如果存在i<j并且ai>aj,那么我们称之为逆序对,求逆序对的数目 数据范围:N<=105.Ai<=105. ...
- Win7 64 bit 激活工具
下载地址:http://www.3987.com/xiazai/1/18/35487.html 一键运行,重启就激活了,简洁方便!
- 二探ListView
使用draw9patch 打开内置terminal 输入CD C:\Users\Gaby\AppData\Local\Android\sdk 在该目录下输入draw9patch 导入图片,开始绘制 本 ...
- UbuntuOpenStack core componennts
<1,keystone安装配置> 1,yum -y install openstack-keystone python-keystoneclient; 2,配置实用mysql存储keyto ...
- NSTimer你真的会用了吗
http://www.cnblogs.com/smileEvday/archive/2012/12/21/NSTimer.html
- #include <boost/thread.hpp>
在这个库最重要的一个类就是boost::thread,它是在boost/thread.hpp里定义的,用来创建一个新线程.它已经被纳入C++标准库中. 小结:新一代C++标准将线程库引入后,将简化多线 ...
- 线上操作使用tmux提高工作效率
对于常常在线上操作的人来说有一种烦恼,就是在操作过程中,有事离开了一下,电脑自己主动睡眠了.然后网络断开连接.这时候任务就要又一次跑.非常烦恼. tmux能够解决问题. tmux能够看成虚拟屏幕,不受 ...
- asp.net文件操作类
/** 文件操作类 **/ #region 引用命名空间 using System; using System.Collections.Generic; using System.Text; usin ...
- (转载)log4net 组件详解
1.概述 log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.本文主要是介绍如何在Visual S ...
- javascript 手机号抽奖
案例 ---- 手机号抽奖 开始抽奖 停止 *具体的备注在代 ...