加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 在线留言 | RSS
成网科技业务包括域名空间企业网站制作
 
国际域名com/net/org仅售80元/年
1G独立空间(PHP+MYSQL)仅售600元/年
您当前的位置:首页 > 网页制作 > Div+CSS

CSS中的zoom属性和scale属性的用法及区别

时间:2015-09-30 11:40:11  来源:Web技术研究所  作者:佚名  点击:

这篇文章主要介绍了CSS中的zoom属性和scale属性的用法及区别,是CSS入门学习中的基础知识,需要的朋友可以参考下

zoom 属性ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
语法:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zoom:normal | <number> | <percentage>ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
默认值:normalieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
适用于:所有元素ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
继承性:有ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
取值:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
normal:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
使用对象的实际尺寸。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<number>:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
用浮点数来定义缩放比例。不允许负值ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<percentage>:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
用百分比来定义缩放比例。不允许负值ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
说明:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
设置或检索对象的缩放比例。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
对应的脚本特性为zoom。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

Scale属性ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
scale属性的取值为2个,它本身其实相当于一个函数,因为它的写法就和函数一样:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
scale();ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
scale(x);ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
scale(x,y);ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
1、scale(x,y) 对元素进行缩放ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
X表示水平方向缩放的倍数 Y表示垂直方向的缩放倍数ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
transform:scale(2,2.5);ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
2、scaleX(<number>) 元素只在X轴(水平方向)缩放元素。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
transform:scaleX(2);ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
3、scaleY(<number>) 元素只在Y轴(垂直方向)缩放元素。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
基点一样在元素的中心位置。可以通过transform-origin来改变基点。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
transform:scaleY(2);ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
看看兼容性写法:ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

CSS Code复制内容到剪贴板
  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的区别ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
运行<!DOCTYPE html>ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

CSS Code复制内容到剪贴板
  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>  

ieh成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

成网科技 www.it28.com竭诚为您服务!
开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设_成网科技

更多
 


来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
栏目更新
栏目热门