来自 Web前端 2020-03-14 06:28 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

网上澳门金莎娱乐:CSS中zoom和scale的差异

时间: 2019-11-27阅读: 204标签: 区别先说原理

zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。

网上澳门金莎娱乐,另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。

例子

stylediv { width:300px;height:100px; border:1px solid red; font-size:0px; line-height:100px; margin:10px;}span { display:inline-block; height:80px;width:200px;background:blue; vertical-align:middle; overflow:hidden;}/style

html

div span /span/divdiv span /span/divdiv span /span/div

效果稍微解释一下

第一个测试中只设置了scale,于是元素以自己的中心为基点做缩放。

第二个测试中不仅设置了scale,还有origin来将缩放的基点设置到左上角,因此变化结束后元素呆在了左上角。虽然容器设置了和高度一样的行高,当它并没有在容器里居中,因为scale是先布局后变换的,变换不会对布局产生影响。

最后一个测试是使用zoom,虽然Firefox上不支持,但这是个很古老的特性了。它和第二个测试的区别是它先缩放,后计算布局。所以在例子中它得到了垂直居中效果。

zoom与scale的区别总结

1、兼容性的差异:zoom为非标准属性,除firefox浏览器已在其他浏览器中得到了良好支持,scale已经是标准属性除IE8-外现代浏览器均能较好的支持;

2、取值差异:zoom的合法值可以为数值、百分比以及normal而scale则只能为数值;

3、缩放中心点差异:zoom缩放中心点为左上角,而scale默认为中心点但可以通过transform-origin进行改变;

4、重绘差异:zoom的缩放改变了元素占据空间的大小会引起整个页面的重绘而scale缩放所占据的原始尺寸不变,只在当前元素进行重绘;

5、渲染计算方法可能有差异:zoom为锐化,而scale为模糊;

6、对文字的缩放规则不一致:zoom的缩放依然受限于最小12px的中文大小限制;而scale就是纯粹就图形进行比例控制,文字50%原来尺寸;

7、这点应该是与上一条相似,border为1px的时候zoom受限于浏览器最小显示1px;而scale就纯粹进行比例控制,不受限。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:网上澳门金莎娱乐:CSS中zoom和scale的差异

关键词: