zoom和scale這兩個東西都是用於對元素的縮放，但兩者除了相容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角，而scale預設是中間位置，可以通過transform-origin來設定。另外他們執行的渲染順序也不同zoom可能影響到盒子的計算。
執行
>
style
="-webkit-transform:scale(0.5);
">
>
>
>
style
="-webkit-transform-origin:top left;
-webkit-transform:scale(0.5);
">
>
>
>
style
="zoom:0.5;
">
>
>
第乙個測試中只設定了scale，於是元素以自己的中心為基點做縮放。第二個測試中不僅設定了scale，還有origin來將縮放的基點設定到左上角，因此變化結束後元素呆在了左上角。雖然容器設定了和高度一樣的行高，當它並沒有在容器裡居中，因為scale是先布局後變換的，變換不會對布局產生影響。最後乙個測試是使用zoom，雖然firefox上不支援，但這是個很古老的特性了。它和第二個測試的區別是它先縮放，後計算布局。所以在例子中它得到了垂直居中效果。
CSS中zoom和scale的區別
zoom和scale這兩個東西都是用於對元素的縮放，但兩者除了相容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角，而scale預設是中間位置，可以通過transform origin來設定。另外他們執行的渲染順序也不同zoom可能影響到盒子的計算。執行 第乙個測試中只設定了scale，於...
CSS中的zoom屬性和scale屬性的用法及區別
css中的zoom屬性和scale屬性的用法及區別 scale屬性 scale屬性的取值為2個，它本身其實相當於乙個函式，因為它的寫法就和函式一樣 scale scale x scale x,y 1 scale x,y 對元素進行縮放 x表示水平方向縮放的倍數 y表示垂直方向的縮放倍數 y是乙個可選...
CSS中zoom的作用
2 樣式排除法 有些複雜的頁面也許載入了 n 個外鏈 css 檔案，那麼逐個刪除 css 檔案，找到 bug 觸發的具體 css 檔案，縮小鎖定的範圍。對於剛才鎖定的問題 css 樣式檔案，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。3 模組確認法 有時候我們也可以從...