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的区别
时间： 2024-10-29 03:04:54
CSS中zoom和scale的区别的相关文章
css中zoom:1以及z-index的作用
一.CSS中zoom:1的作用在做IE6.IE7.IE8浏览器兼容的时候,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:1.触发IE浏览器的haslayout2.解决IE下的浮动,margin重叠等一些问题. 二.z-index:auto|number; ◆auto遵从其父对象的定位 ◆number无单位的整数值.可为负数CSS样式,把z-index设置为999或很大,是什么意思?z-index是针对网页显示中的一个特殊属性.因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表
CSS中 Zoom属性
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的应用办法: zoom : normal | number normal : 默认值.应用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可所以数值,
CSS中zoom:1的作用 ，小标签大作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.比如,本站使用DIV做一行两列显示,HTML代码: <div class="h_mainbox"> <h2>推荐文章</h2> <ul class="mainlist"> <li><a href=&quo
(转载)CSS中zoom:1的作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.HTML代码: 1 <div class="h_mainbox"> 2 <h2>推荐文章</h2> 3 <ul class="mainlist"> 4 <li><a href="#"
CSS中link和@import的区别
你对CSS中link和@import的区别是否熟悉,这里和大家分享一下,@import 属性用来指定导入的外部样式表及目标设备类型, link除了调用CSS外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能 调用CSS. CSS中link和@import有什么区别? 定义 ◆link元素 HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息.这些额外资源可以是样式化信息(CSS).导航助手.属于另 外形式的信息(RSS).联系信
【技术】css中em与px的区别
em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明body{font-size: 62.5%;},这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了.em有如下特点: 1. em的值并不是固定的: 2. e
CSS中zoom:1的作用
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的使用方法: zoom : normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,
你不知道的css中block与inline的区别(转)
所有的HTML元素都属于block和inline之一. block元素的特点是:(1)总是在新行上开始:(2)高度,行高以及顶和底边距都可控制:(3)宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: (1)和其他元素都在一行上:(2)高,行高及顶和底边距不可改变:(3)宽度就是它的文字或图片的宽度,不可改变.&l
CSS中*和body有什么区别
CSS中*和body有什么区别:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在介绍它们两个我们首先应该知道这两个符号在CSS文件中充当的是什么角色.在CSS文件中*是通配符选择器,它可以选择文档中所有的元素,也就是说是一个通杀选择器.body是一个普通的类型选择器,只能够选中body这么一个元素.而之所大家会感觉到*和body选择器有时候作用是相同的,主要是因为body是绝大多数布局元素的父元素,如果元素的CSS属性居有继承性的话,那么两者的效果确实一样.例如: body{font-s