CSS zoom屬性用法

admin發表於2017-10-28
CSSOOM

此屬性只有IE瀏覽器支援，其他的例如谷歌或者火狐瀏覽器並不支援，它可以設定元素的縮放效果，但是還有一些其他非常實用的用法，例如觸發IE瀏覽器的hasLayout屬性以用來清除浮動或者其他作用。

一.zoom的基本用法:

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

語法結構:

[CSS] 純文字檢視 複製程式碼
zoom：normal | <number> | <percentage>

引數解釋:

1.normal:表示物件採用預設的尺寸大小，相當於zoom值等於1.0或者100%。

2.number:一個浮點數，表示元素的放大倍數，1.0為基數。

3.percentage:百分數，表示元素的放大百分，100%為基數。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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。

程式碼如下:

[CSS] 純文字檢視 複製程式碼
.border{
  border:1px solid #CCC;
  padding:2px;
  overflow:hidden;
  _zoom:1;
}

_zoom是專門針對IE6的hack，由於zoom值是1，所以在IE6瀏覽器中元素也不會出現縮放效果，同時它和overflow:hidden結合起來使用，具有清除浮動的效果。

相關文章