欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中的zoom屬性和scale屬性的用法及區(qū)別

Web技術(shù)研究所   發(fā)布時(shí)間：2015-09-07 17:54:36   作者：佚名   我要評論
這篇文章主要介紹了CSS中的zoom屬性和scale屬性的用法及區(qū)別,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下

zoom 屬性
語法：
zoom：normal | <number> | <percentage>
默認(rèn)值：normal
適用于：所有元素
繼承性：有
取值：
normal：
使用對象的實(shí)際尺寸。
<number>：
用浮點(diǎn)數(shù)來定義縮放比例。不允許負(fù)值
<percentage>：
用百分比來定義縮放比例。不允許負(fù)值
說明：
設(shè)置或檢索對象的縮放比例。
對應(yīng)的腳本特性為zoom。

Scale屬性
scale屬性的取值為2個(gè)，它本身其實(shí)相當(dāng)于一個(gè)函數(shù)，因?yàn)樗膶懛ň秃秃瘮?shù)一樣：
scale();
scale(x);
scale(x,y);
1、scale(x,y) 對元素進(jìn)行縮放
X表示水平方向縮放的倍數(shù) Y表示垂直方向的縮放倍數(shù)
Y是一個(gè)可選參數(shù)，沒有設(shè)置的話，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。
transform:scale(2,2.5);
2、scaleX(<number>) 元素只在X軸（水平方向）縮放元素。
默認(rèn)值是1，基點(diǎn)一樣在元素的中心位置?？梢酝ㄟ^transform-origin來改變基點(diǎn)
transform:scaleX(2);
3、scaleY(<number>) 元素只在Y軸（垂直方向）縮放元素。
基點(diǎn)一樣在元素的中心位置?？梢酝ㄟ^transform-origin來改變基點(diǎn)。
transform:scaleY(2);
看看兼容性寫法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1.  .test{   
  2. -moz-transform:scale(2,2);   
  3. -webkit-transform:scale(2,2);   
  4. -o-transform:scale(2,2);   
  5. background:url(img/i.png) no-repeat;   
  6. width:198px;   
  7. height:133px;   
  8. }  

zoom和scale的區(qū)別
zoom和scale這兩個(gè)東西都是用于對元素的縮放，但兩者除了兼容性之外還有一些不同的地方。zoom縮放會(huì)將元素保持在左上角，而scale默認(rèn)是中間位置，可以通過transform-origin來設(shè)置。另外他們執(zhí)行的渲染順序也不同zoom可能影響到盒子的計(jì)算。
運(yùn)行<!DOCTYPE html>

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2. div {   
  3.   width:300px;height:100px;   
  4.   border:1px solid #CCC;   
  5.   font-size:0px;   
  6.   line-height:100px;   
  7.   margin:10px;   
  8. }   
  9. span {   
  10.   display:inline-block;   
  11.   height:80px;width:200px;background:#F5F5F5;   
  12.   vertical-align:middle;   
  13.   overflow:hidden;   
  14. }   
  15. </style>   
  16. <div>   
  17.   <span style="-webkit-transform:scale(0.5);"></span>   
  18. </div>   
  19. <div>   
  20.   <span style="  
  21.     -webkit-transform-origin:top left;  
  22.     -webkit-transform:scale(0.5);  
  23.   "></span>   
  24. </div>   
  25. <div>   
  26.   <span style="zoom:0.5;"></span>   
  27. </div>  

相關(guān)文章

最新評論