溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“css的zoom屬性有什么用”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“css的zoom屬性有什么用”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
zoom屬性是ie專有屬性，除了設置或者檢索對象的縮放比例之外，它還有可以觸發ie的haslayout屬性、清除浮動、清除margin重疊等作用。
css的zoom屬性
zoom這個屬性是ie專有屬性，除了設置或者檢索對象的縮放比例之外，它還有可以觸發ie的haslayout屬性，清除浮動，清除margin重疊等作用。 不過值得注意的一點就是火狐瀏覽器不支持zoom屬性，但是在webkit內核瀏覽器中zoom這個屬性也是可以被支持的。
（1）下面我們來看下zoom在非IE瀏覽器中的作用：看下面的例子，我是在谷歌瀏覽器下訪問的，在該例子中zoom的作用是放大為原來的2倍（讀者可以自己嘗試縮小操作）
1.zoom:1 時
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div{
width: 100px;
height: 100px;
border: 3px solid red;
zoom: 1;
}
</style>
</head>
<body>
<div>hello</div>
</body>
<html>以上代碼的結果如圖：
2.zoom：2 即放大為原來的2倍：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
div{
width: 100px;
height: 100px;
border: 3px solid red;
zoom: 2;
}
</style>
</head>
<body>
<div>hello</div>
</body>
<html>結果截圖如下：
注意：zoom在非IE瀏覽器中表現為支持放大或者縮小，但是由于這個屬性是一個不標準的css屬性，因此一般在非IE瀏覽器中不用zoom來實現div 的縮放效果，現在要放大或者縮小直接用css3的transform屬性。
（2）看完了zoom在非IE瀏覽器中的表現之后，我們就該看看這個屬性在IE瀏覽器中的作用了。
Zoom的使用方法：
zoom :? normal | number
normal : 默認值。使用對象的實際尺寸
number : 百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當于此屬性的 normal 值用白話講解就是zoom:后面的數字即放大的倍數，可以是數值，也可以是百分比。如：zoom:1，zoom:120%。而這個屬性只要在IE中才起作用，所以很少用到它的實際用途，而最經常用到作用是清除浮動等，如：
.border{
border:1px solid #CCC;
padding:2px;
overflow:hidden;
_zoom:1;
}_zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會執行zoom:1表示對象的縮放比例，但這里
overflow:hidden;和_zoom:1;是連起來用的，作用是清除border內部浮動。
同理，還可以使用同樣方法清除margin屬性在IE瀏覽器中的重疊問題：這就要提到zoom屬性在IE中的第二個作用了，即
兼容IE6、IE7、IE8瀏覽器，經常會遇到一些問題，可以使用zoom:1來解決，有如下作用：
(2)觸發IE瀏覽器的haslayout ,解決ie下的浮動，margin重疊等一些問題。
比如，本站使用DIV做一行兩列顯示，HTML代碼：
<div class="h_mainbox"> <h3>推薦文章</h3> <ul class="mainlist"> <li><a href="#" style="color:#0000FF" target="_blank">CSS庫吧</a></li> <li><a href="#" style="color:#0000FF" target="_blank">原創< /a></li> </ul> </div>
CSS代碼：
.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}
.h_mainbox h3 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}
.h_mainbox h3 span { float:right; font-weight:normal;}
.h_mainbox ul { padding:6px 0px; background:#fff;}
.mainlist { overflow:auto; zoom:1;}
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常顯示效果了。
(3)下面是zoom屬性在IE瀏覽器中常見作用總結，希望對今后在使用這個屬性時有所幫助：
1、檢查頁面的標簽是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用 Dreamweaver 打開文件檢查，一般沒有閉合的標簽，會黃色背景高亮。
2、樣式排除法
有些復雜的頁面也許加載了 N 個外鏈 CSS 文件，那么逐個刪除 CSS 文件，找到 BUG 觸發的具體 CSS 文件，縮小鎖定的范圍。
對于剛才鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。
3、模塊確認法
有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模塊，尋找到觸發問題的 HTML 模塊。
4、檢查是否清除浮動
其實有不少的 CSS BUG 問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用 無額外 HTML 標簽的清除浮動的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。
5、檢查 IE 下是否觸發 haslayout
很多的 IE 下復雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對于處理復雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍色上的轉帖 ）
快捷提示：如果觸發了 haslayout，IE 的調試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。
6、邊框背景調試法
故名思議就是給元素設置顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試 CSS BUG 的方法之一，對于復雜 BUG 依舊適用。經濟實惠還環保^^
最后想強調一點的是，養成良好的書寫習慣，減少額外標簽，盡量語義，符合標準，其實可以為我們減少很多額外的復雜 CSS BUG，更多的時候其實是我們自己給自己制造了麻煩。
以上是“css的zoom屬性有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
