網(wǎng)頁(yè)美工設計

CSS樣式中zoom的含義及用法作用

編輯：時(shí)間：2018-07-03 09:27:19

　　zoom是主要是IE低版本瀏覽器的專(zhuān)有屬性，在CSS中經(jīng)常用來(lái)觸發(fā)ie瀏覽器的專(zhuān)有屬性layout。CSS中zoom:1的作用

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

　　觸發(fā)IE瀏覽器的haslayout

　　解決ie下的浮動(dòng)，margin重疊等一些問(wèn)題。

　　zoom 基本語(yǔ)法zoom : normal | number

　　語(yǔ)法取值normal:默認值。

　　使用對象的實(shí)際尺寸number : 百分數 | 無(wú)符號浮點(diǎn)實(shí)數。浮點(diǎn)實(shí)數值為1.0或百分數為100%時(shí)相當于此屬性的 normal 值。

　　使用說(shuō)明

　　設置或檢索對象的縮放比例。設置或更改一個(gè)已被呈遞的對象的此屬性值將導致環(huán)繞對象的內容重新流動(dòng)。雖然此屬性不可繼承，但是它會(huì )影響對象的所有子對象( children )。這種影響很像 background 和 filter 屬性導致的變化。此屬性對于 currentStyle 對象而言是只讀的。對于視頻對象而言是可讀寫(xiě)的。對應的腳本特性為 zoom 。

　　在實(shí)際應用中，由于考慮到兼容性，在頁(yè)面制作過(guò)程中經(jīng)常出現的就是zoom:1，其他的基本不會(huì )用到。

　　css中的zoom的作用

　　1、檢查頁(yè)面的標簽是否閉合

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

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

　　2、樣式排除法

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

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

　　3、模塊確認法

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

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

　　其實(shí)有不少的 CSS BUG 問(wèn)題是因為沒(méi)有清除浮動(dòng)造成的。養成良好的清除浮動(dòng)的習慣是必要的，推薦使用無(wú)額外 HTML 標簽的清除浮動(dòng)的方法(盡量避免使用 overflow:hidden;zoom:1 的類(lèi)似方法來(lái)清除浮動(dòng)，會(huì )有太多的限制性)。

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

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

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

　　6、邊框背景調試法

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

　　最后想強調一點(diǎn)的是，養成良好的書(shū)寫(xiě)習慣，減少額外標簽，盡量語(yǔ)義，符合標準，其實(shí)可以為我們減少很多額外的復雜 CSS BUG，更多的時(shí)候其實(shí)是我們自己給自己制造了麻煩。希望你遠離 BUG ，生活越來(lái)越美好。

<< 上一篇：網(wǎng)頁(yè)和APP中背景的8個(gè)主要設計趨勢

>> 下一篇：網(wǎng)頁(yè)設計使用單頁(yè)設計還是多頁(yè)設計

推薦資訊