溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS中zoom和scale的區別是什么”，在日常操作中，相信很多人在CSS中zoom和scale的區別是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS中zoom和scale的區別是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
zoom和scale這兩個東西都是用于對元素的縮放，但兩者除了兼容性之外還有一些不同的地方。zoom縮放會將元素保持在左上角，而scale默認是中間位置，可以通過transform-origin來設置。另外他們執行的渲染順序也不同zoom可能影響到盒子的計算。
csszoom怎么運行
運行<!DOCTYPEhtml>
<style>
div{
width:300px;height:100px;
border:1pxsolid#CCC;
font-size:0px;
line-height:100px;
margin:10px;
}
span{
display:inline-block;
height:80px;width:200px;background:#F5F5F5;
vertical-align:middle;
overflow:hidden;
}
</style>
<div>
<span></span>
</div>
<div>
<spanstyle="
-webkit-transform-origin:topleft;
-webkit-transform:scale(0.5);
"></span>
</div>
<div>
<span></span>
</div>
csszoom測試怎樣
第一個測試中只設置了scale，于是元素以自己的中心為基點做縮放。第二個測試中不僅設置了scale，還有origin來將縮放的基點設置到左上角，因此變化結束后元素呆在了左上角。雖然容器設置了和高度一樣的行高，當它并沒有在容器里居中，因為scale是先布局后變換的，變換不會對布局產生影響。最后一個測試是使用zoom，雖然Firefox上不支持，但這是個很古老的特性了。它和第二個測試的區別是它先縮放，后計算布局。所以在例子中它得到了垂直居中效果。
到此，關于“CSS中zoom和scale的區別是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
