那么它的实际值都是相对父元素的宽度来算百分数的值,包括 padding-bottom 和 padding-top 也是如此,所以我们这里宽度可以设置为40%。由于我们这里box的宽度是100%,而高度没有告诉,所以不能直接设置高度值来取得效果,我可利用padding-bottom来代替height值,即如上所示,把height设为0,而把padding-bottom设为80%,这样我们就可以看到效果了,你可以随意拖放浏览器窗口大小,都是等比列缩小放大的哦这个也算是自适应屏幕的一个小方法吧》。。
html代码
代码如下
<div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
css代码
代码如下
.item { width:40%height:0padding-bottom: 80%background-color:#f00float:left margin:10px 5px}
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
属性。
希望我的回答能够帮到你。