css里的zoom属性详解和使用

html-css08

css里的zoom属性详解和使用,第1张

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属性的具体属性和使用可查看在线教程CSS3 transform 属性。

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

1、使用clear:both清除浮动

在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。

优点:简单,方便兼容性好

缺点:因为会造成结构混乱,不利于后期维护

建议:一般情况下不建议使用该方法

2、利用伪元素clearfix来清除浮动

给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的

.clearfix:after {

display: block

clear: both

content: ""

visibility: hidden

height: 0

}

.clearfix { zoom: 1}

原理:IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题

优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持

建议:推荐使用,建议定义在公共类,以减少css代码

3、父级div定义overflow方法

当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。

.parent-container {

/* other style... */

overflow: hidden

}

原理:它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果。

优点:简单,代码少,浏览器支持好

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏

建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

4、双伪元素方法的使用

通过给父元素设置双伪元素来达到清除浮动的效果,即添加:before和:after伪元素。

.clearfix:before,.clearfix:after {

content: ""

display: block

clear: both

}

与方法2相同

zoom:1属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

但很遗憾的是,它通不过W3C验证.