CSS zoom属性用法

快乐打工仔 分类:实例代码

此属性只有IE浏览器支持,其他的例如谷歌或者火狐浏览器并不支持,它可以设置元素的缩放效果,但是还有一些其他非常实用的用法,例如触发IE浏览器的hasLayout属性以用来清除浮动或者其他作用。

一.zoom的基本用法:

此属性的初衷是用在控制元素的缩放效果。

语法结构:

zoom:normal | <number> | <percentage>

参数解释:

1.normal:表示对象采用默认的尺寸大小,相当于zoom值等于1.0或者100%。

2.number:一个浮点数,表示元素的放大倍数,1.0为基数。

3.percentage:百分数,表示元素的放大百分,100%为基数。

代码实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>CSS教程</title> 
<style type="text/css"> 
div{margin-top:10px;} 
.first{ 
  zoom:1; 
  width:150px; 
  height:80px; 
  border:1px solid green; 
} 
.second{ 
  zoom:1.5; 
  width:150px; 
  height:80px; 
  border:1px solid green; 
} 
.third{ 
  zoom:50%; 
  width:150px; 
  height:80px; 
  border:1px solid green; 
} 
.fourth{ 
  zoom:100%; 
  width:150px; 
  height:80px; 
  border:1px solid green; 
} 
</style> 
</head> 
<body> 
  <div class="first">犀牛前端部落欢迎您</div> 
  <div class="second">犀牛前端部落欢迎您</div> 
  <div class="third">犀牛前端部落欢迎您</div> 
  <div class="fourth">犀牛前端部落欢迎您</div> 
</body> 
</html>

以上你代码实现了元素的和元素中文本的缩放功能。

但是由于该属性只有IE浏览器支持,所以用途不大,很少在代码中有此用法。

二.其他用途:

zoom属性虽然在缩放上无用武之地,但是在低版本的IE浏览器中则有不小的用途,最典型的就是清除浮动中的应用。

zoom:1可以用来解决IE6的子元素浮动时候父元素不自动扩大的问题。

功能相当于overflow:auto,同样也可以用height:1%来代替zoom:1。

代码如下:

.border{
  border:1px solid #CCC;
  padding:2px;
  overflow:hidden;
  _zoom:1;
}

_zoom是专门针对IE6的hack,由于zoom值是1,所以在IE6浏览器中元素也不会出现缩放效果,同时它和overflow:hidden结合起来使用,具有清除浮动的效果。

CSS zoom属性用法,这样的场景在实际项目中还是用的比较多的,关于CSS zoom属性用法就介绍到这了。

CSS zoom属性用法属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容