柚子快報(bào)激活碼778899分享：前端 關(guān)于css的zoom屬性

http://yzkb.51969.com/

一.zoom屬性概述

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

二.下面我們來演示一下

它是整個(gè)塊級元素整體放大的一個(gè)效果。

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

三.zoom與scale的區(qū)別總結(jié)

1.zoom是一個(gè)非標(biāo)準(zhǔn)的css屬性，它是不支持火狐瀏覽器的，scale已經(jīng)是標(biāo)準(zhǔn)屬性除IE8-外現(xiàn)代瀏覽器均能較好的支持；

2.縮放中心點(diǎn)差異：zoom縮放中心點(diǎn)為左上角，而scale默認(rèn)為中心點(diǎn)但可以通過transform-origin進(jìn)行改變；

3.重繪差異：zoom的縮放改變了元素占據(jù)空間的大小會引起整個(gè)頁面的重繪而scale縮放所占據(jù)的原始尺寸不變，只在當(dāng)前元素進(jìn)行重繪；

4.取值差異：zoom的合法值可以為數(shù)值、百分比以及normal而scale則只能為數(shù)值；

四.zoom的使用場景

做圖片的放大縮小功能

?

柚子快報(bào)激活碼778899分享：前端 關(guān)于css的zoom屬性

http://yzkb.51969.com/

精彩鏈接