CSS中zoom和scale的区别是什么-创新互联
这篇文章主要介绍“CSS中zoom和scale的区别是什么”,在日常操作中,相信很多人在CSS中zoom和scale的区别是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中zoom和scale的区别是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联建站是一家专注于成都做网站、网站制作、成都外贸网站建设与策划设计,河西网站建设哪家好?创新互联建站做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:河西等地区。河西做网站价格咨询:13518219792zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。
csszoom怎么运行
运行
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;
}
-webkit-transform-origin:topleft; -webkit-transform:scale(0.5); ">
csszoom测试怎样
第一个测试中只设置了scale,于是元素以自己的中心为基点做缩放。第二个测试中不仅设置了scale,还有origin来将缩放的基点设置到左上角,因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高,当它并没有在容器里居中,因为scale是先布局后变换的,变换不会对布局产生影响。最后一个测试是使用zoom,虽然Firefox上不支持,但这是个很古老的特性了。它和第二个测试的区别是它先缩放,后计算布局。所以在例子中它得到了垂直居中效果。
到此,关于“CSS中zoom和scale的区别是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
本文标题:CSS中zoom和scale的区别是什么-创新互联
本文URL:http://pwwzsj.com/article/jhdco.html