国产精品一区二区在线播放,精品欧美一区二区三区

相關(guān)推薦

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

　　CSS中的zoom屬性和scale屬性的用法及區(qū)別是什么呢?以下是小編整理的相關(guān)內(nèi)容，歡迎閱讀學(xué)習(xí)!

　　zoom 屬性

　　語(yǔ)法：

　　zoom：normal | |

　　默認(rèn)值：normal

　　適用于：所有元素

　　繼承性：有

　　取值：

　　normal：

　　使用對(duì)象的實(shí)際尺寸。

　�。�

　　用浮點(diǎn)數(shù)來(lái)定義縮放比例。不允許負(fù)值

　�。�

　　用百分比來(lái)定義縮放比例。不允許負(fù)值

　　說(shuō)明：

　　設(shè)置或檢索對(duì)象的縮放比例。

　　對(duì)應(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) 對(duì)元素進(jìn)行縮放

　　X表示水平方向縮放的倍數(shù) Y表示垂直方向的縮放倍數(shù)

　　Y是一個(gè)可選參數(shù)，沒(méi)有設(shè)置的話，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的。并以X為準(zhǔn)。

　　transform:scale(2,2.5);

　　2、scaleX() 元素只在X軸(水平方向)縮放元素。

　　默認(rèn)值是1，基點(diǎn)一樣在元素的中心位置�？梢酝ㄟ^(guò)transform-origin來(lái)改變基點(diǎn)

　　transform:scaleX(2);

　　3、scaleY() 元素只在Y軸(垂直方向)縮放元素。

　　基點(diǎn)一樣在元素的中心位置。可以通過(guò)transform-origin來(lái)改變基點(diǎn)。

　　transform:scaleY(2);

　　看看兼容性寫法：

　　CSS Code復(fù)制內(nèi)容到剪貼板

　　.test{

　　-moz-transform:scale(2,2);

　　-webkit-transform:scale(2,2);

　　-o-transform:scale(2,2);

　　background:url(img/i.png) no-repeat;

　　width:198px;

　　height:133px;

　　}

　　zoom和scale的區(qū)別

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

　　運(yùn)行

　　CSS Code復(fù)制內(nèi)容到剪貼板

<style>

　　p {

　　width:300px;height:100px;

　　border:1px solid #CCC;

　　font-size:0px;

　　line-height:100px;

　　margin:10px;

　　}

　　span {

　　display:inline-block;