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

  • 相关阅读:
    sqlserver2005转换到2000
    vs2008的注册
    给联想K46装系统
    两个调片技巧
    mapx集合的问题
    audio player播放多文件
    JQuery查询ul嵌套结构中当前所处的位置
    .Net中使用带UI的OCX的方法
    U盘启动和量产
    winrar的图标
  • 原文地址:https://www.cnblogs.com/jackson1/p/13285557.html
Copyright © 2011-2022 走看看