css的zoom屬性有什么用

發(fā)布時(shí)間：2021-03-02 11:02:25 來源：億速云閱讀：295 作者：清風(fēng) 欄目：web開發(fā)

這篇“css的zoom屬性有什么用”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對于“css的zoom屬性有什么用”，小編整理了以下知識(shí)點(diǎn)，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

zoom屬性是ie專有屬性，除了設(shè)置或者檢索對象的縮放比例之外，它還有可以觸發(fā)ie的haslayout屬性、清除浮動(dòng)、清除margin重疊等作用。

css的zoom屬性

zoom這個(gè)屬性是ie專有屬性，除了設(shè)置或者檢索對象的縮放比例之外，它還有可以觸發(fā)ie的haslayout屬性，清除浮動(dòng)，清除margin重疊等作用。不過值得注意的一點(diǎn)就是火狐瀏覽器不支持zoom屬性，但是在webkit內(nèi)核瀏覽器中zoom這個(gè)屬性也是可以被支持的。

（1）下面我們來看下zoom在非IE瀏覽器中的作用：看下面的例子，我是在谷歌瀏覽器下訪問的，在該例子中zoom的作用是放大為原來的2倍（讀者可以自己嘗試縮小操作）

1.zoom:1 時(shí)

<!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>

以上代碼的結(jié)果如圖：

css的zoom屬性有什么用

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>

結(jié)果截圖如下：

css的zoom屬性有什么用

注意：zoom在非IE瀏覽器中表現(xiàn)為支持放大或者縮小，但是由于這個(gè)屬性是一個(gè)不標(biāo)準(zhǔn)的css屬性，因此一般在非IE瀏覽器中不用zoom來實(shí)現(xiàn)div 的縮放效果，現(xiàn)在要放大或者縮小直接用css3的transform屬性。

（2）看完了zoom在非IE瀏覽器中的表現(xiàn)之后，我們就該看看這個(gè)屬性在IE瀏覽器中的作用了。

Zoom的使用方法：

zoom :? normal | number

normal :　默認(rèn)值。使用對象的實(shí)際尺寸

number :　百分?jǐn)?shù) | 無符號(hào)浮點(diǎn)實(shí)數(shù)。浮點(diǎn)實(shí)數(shù)值為1.0或百分?jǐn)?shù)為100%時(shí)相當(dāng)于此屬性的 normal 值用白話講解就是zoom:后面的數(shù)字即放大的倍數(shù)，可以是數(shù)值，也可以是百分比。如：zoom:1，zoom:120%。而這個(gè)屬性只要在IE中才起作用，所以很少用到它的實(shí)際用途，而最經(jīng)常用到作用是清除浮動(dòng)等，如：

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

_zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會(huì)執(zhí)行zoom:1表示對象的縮放比例，但這里

overflow:hidden;和_zoom:1;是連起來用的，作用是清除border內(nèi)部浮動(dòng)。

同理，還可以使用同樣方法清除margin屬性在IE瀏覽器中的重疊問題：這就要提到zoom屬性在IE中的第二個(gè)作用了，即

兼容IE6、IE7、IE8瀏覽器，經(jīng)常會(huì)遇到一些問題，可以使用zoom:1來解決，有如下作用：

(2)觸發(fā)IE瀏覽器的haslayout ,解決ie下的浮動(dòng)，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">原創(chuàng)< /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瀏覽器中常見作用總結(jié)，希望對今后在使用這個(gè)屬性時(shí)有所幫助：

1、檢查頁面的標(biāo)簽是否閉合

不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發(fā)來嵌套的，而他們很容易犯此類問題。

快捷提示：可以用 Dreamweaver 打開文件檢查，一般沒有閉合的標(biāo)簽，會(huì)黃色背景高亮。

　　2、樣式排除法

有些復(fù)雜的頁面也許加載了 N 個(gè)外鏈 CSS 文件，那么逐個(gè)刪除 CSS 文件，找到 BUG 觸發(fā)的具體 CSS 文件，縮小鎖定的范圍。

　　對于剛才鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發(fā)樣式定義，甚至是具體的觸發(fā)樣式屬性。

　　3、模塊確認(rèn)法

有時(shí)候我們也可以從頁面的 HTML 元素出發(fā)。刪除頁面中不同的 HTML 模塊，尋找到觸發(fā)問題的 HTML 模塊。

　　4、檢查是否清除浮動(dòng)

其實(shí)有不少的 CSS BUG 問題是因?yàn)闆]有清除浮動(dòng)造成的。養(yǎng)成良好的清除浮動(dòng)的習(xí)慣是必要的，推薦使用無額外 HTML 標(biāo)簽的清除浮動(dòng)的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動(dòng)，會(huì)有太多的限制性）。

　　5、檢查 IE 下是否觸發(fā) haslayout

很多的 IE 下復(fù)雜 CSS BUG 都與 IE 特有的 haslayout 息息相關(guān)。熟悉和理解 haslayout 對于處理復(fù)雜的 CSS BUG 會(huì)事半功倍。推薦閱讀 old9 翻譯的《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀藍(lán)色上的轉(zhuǎn)帖）

快捷提示：如果觸發(fā)了 haslayout，IE 的調(diào)試工具 IE Developer Toolbar 中的屬性中將會(huì)顯示 haslayout 值為 -1。

　　6、邊框背景調(diào)試法

故名思議就是給元素設(shè)置顯眼的邊框或者背景（一般黑色或紅色），進(jìn)行調(diào)試。此方法是最常用的調(diào)試 CSS BUG 的方法之一，對于復(fù)雜 BUG 依舊適用。經(jīng)濟(jì)實(shí)惠還環(huán)保^^

最后想強(qiáng)調(diào)一點(diǎn)的是，養(yǎng)成良好的書寫習(xí)慣，減少額外標(biāo)簽，盡量語義，符合標(biāo)準(zhǔn)，其實(shí)可以為我們減少很多額外的復(fù)雜 CSS BUG，更多的時(shí)候其實(shí)是我們自己給自己制造了麻煩。

以上是“css的zoom屬性有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css的zoom屬性有什么用

css是什么意思

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽