zoukankan
html css js c++ java
CSS中定位和TRANSFORM的比较(day02)
POSITION
CSS中我们想要改变一个元素的位置,我们可以采用的方法之一就是定位,这也是我们最先接触的方法。其主要用法就是给需要移动的元素的父元素或以上添加 position:relative; 再给自身添加 position:absolute; 然后通过改变方位(top,left,right,bottom)来实现元素的移动。
TRANSFORM
CSS3中提供了transform属性,其中的translateX和translateY值可以实现元素的横向与纵向移动。
区别和选择
经过测试。TRANSFORM性能消耗只有position的十分之一!可想而知,CSS3推出新的transform属性也是加快了浏览器的运行速度。
总结
总的来说,当我们能用transform实现预想的效果就不要去使用position了,一个小小的demo就能达到10倍的差距,可想而知在大型项目中差距会更加明显。
使用transform会比top少一个layout延时
transform的Composite Layers经多次测试 延时普遍会大于top
查看全文
相关阅读:
可级联国标GB28181视频平台EasyGBS的视频智能分析平台EasyCVR启动无法正常运行如何解决?
国标GB28181协议视频融合智能分析平台EasyCVR中创建数据库表结构体表名无效问题排查
国标GB28181/RTSP/HIKSDK/Ehome视频智能分析平台EasyCVR如何效仿EasyGBS添加用户功能接口?
国标GB28181(EasyGBS)/RTSP/HIKSDK/EHOME协议视频智能分析平台EasyCVR人脸识别智能分析功能拓展
【解决方案】基于国标GB28181协议视频智能分析平台EasyCVR/EasyGBS打造的智慧企业AR云景解决方案
边缘计算网关EasyNVR及云服务EasyCVR、EasyDSS等联合打造TSINGSEE青犀视频云-边-端协同一体化
【解决方案】企业远程行政会议协同办公视频会议EasyRTC如何实现远程办公?
网络映射/端口穿透/视频组网服务EasyNTS上云网关平台的相关配置参数介绍
称号
剪辑的楼天城的ACM之路
原文地址:https://www.cnblogs.com/jackson1/p/13285557.html
最新文章
灵敏度分析 数学建模
cgal 线面相交,线线相交
改良圈算法
两元素仿生进化算法
python k-means算法
java 泛型 3 反射机制
java 通配符的使用
java 泛型类2
Codeforces Round #564 (Div. 2) C. Nauuo and Cards
Codeforces Round #564 (Div. 2) B. Nauuo and Chess
热门文章
Codeforces Round #564 (Div. 2) A. Nauuo and Votes
B.DongDong认亲戚
A.DongDong破密码
Educational Codeforces Round 66 (Rated for Div. 2) B. Catch Overflow!
Educational Codeforces Round 66 (Rated for Div. 2) A. From Hero to Zero
Codeforces Round #563 (Div. 2) C. Ehab and a Special Coloring Problem
Codeforces Round #563 (Div. 2) B. Ehab Is an Odd Person
Codeforces Round #563 (Div. 2) A. Ehab Fails to Be Thanos
TSINGSEE青犀视频集成H265播放器播放视频流报logger is not defined解决方法
TSINGSEE青犀视频集成H265播放器播放HLS视频流控制台报错Uncaught ReferenceError: i is not defined排查
Copyright © 2011-2022 走看看