csszoom(css里的zoom属性详解和使用)

中国机械与配件网2100

各位老铁们,大家好,今天由我来为大家分享csszoom,以及css里的zoom属性详解和使用的相关问题知识,希望对大家有所帮助。如果可以帮助到大家,还望关注收藏下本站,您的支持是我们最大的动力,谢谢大家了哈,下面我们开始吧!

CSS中zoom和scale的区别

csszoom(css里的zoom属性详解和使用)

一、zoom几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了

zoom的字面意思是“变焦”,摄影的时候常用到的一个概念。对于web上的zoom效果,你也可以按照此概念理解。可以改变页面上元素的尺寸,属于真实尺寸。

在旧的web时代。*zoom:1可以给IE6/IE7浏览器增加haslayout,用来清除浮动,修复一些布局上的疑难杂症等。

其支持的值类型有:

百分比值:zoom:50%,表示缩小到原来的一半。

数值:zoom:0.5,表示缩小到原来的一半。

normal关键字:zoom:normal等同于zoom:1.

注意,虽然Chrome/Safari浏览器支持了zoom属性,但是,其实zoom并不是标准属性。

二、而transform下的scale就不一样了,是明明确确写入规范的。从IE9+到其他现代浏览器都支持。语法为:transform:scale(<x>[<y>]).同时有scaleX,scaleY专门的x,y方向的控制。

和zoom不同,scale并不支持百分比值和normal关键字,只能是数值。而且,还能是负数,没错,负数。而zoom不能是负值!

三、区别先总结的差异:

浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的差别。

控制缩放的值不一样。zoom更全面,但是不能是负数,只能等比例控制;而scale虽然只能是数值,但是能负数,可以只控制1个维度。

然而,更深层次的差异才是更重要的。

zoom的缩放是相对于左上角的;而scale默认是居中缩放;

zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;

zoom和scale对元素的渲染计算方法可能有差异。

css中“zoom:1”是什么意思

继承性:无

兼容性:IE

基本语法

zoom:normal|number

语法取值

normal:默认值。使用对象的实际尺寸

number:百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值

使用说明

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象(children)。这种影响很像background和filter属性导致的变化。此属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。

css里的zoom属性详解和使用

zoom属性确实是ie专有属性,除了设置或者检索对象的缩放比例之外,它还具有触发ie的haslayout属性,清除浮动,清除margin重叠等作用。但是火狐浏览器不支持zoom属性,不过在webkit内核浏览器中zoom这个属性也是可以被支持的。

显然,你这里设置的zoom:2,即表示放大为原来的2倍,里面的字体也相应被放大了2倍。

在IE浏览器里,Zoom的使用方法是这样的:

zoom:normal|number

normal:默认值。使用对象的实际尺寸

number:百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,也可以是百分比。如:zoom:1,zoom:120%。而这个属性只有在IE中才起作用,所以很少用到它的实际用途,而最经常用到作用是清除浮动等。

其实这个属性是一个不标准的css属性,因此一般在非IE浏览器中是不推荐使用zoom来实现div的缩放效果的,如果想要广泛引用实现放大或者缩小的效果,可以直接用css3的transform属性来替代的,即你这里可以设置为transform:scale(2)。关于transform属性的具体属性和使用可查看在线教程CSS3transform属性。

希望我的回答能够帮到你。

好了,文章到此结束,希望可以帮助到大家。