阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      为什么说position absolute 跟float 影响性能?

      核心

      会引起页面重绘?

      详细解释

      position: absolute会完全脱离文档流

      不再在z-index:0层保留占位符,其left、top、right、bottom 值是相对于自己最近的一个位置设置了position: relative 或 position: absolute的祖先元素的;

      如果祖先元素都没有设置position: relative 或 position: absolute,那么就相对于body元素。

      float也能改变文档流

      不同的是,float属性不会让元素“上浮”到另一个z-index层,它仍然让元素在z-index:0层排列,float不像position: relative 和 position: absolute那样,它不能通过left、top、right、bottom属性精确地控制元素的坐标,它只能通过float:left 和 float:right 来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列,影响到周围元素。

      另一个有趣的现象是position: absolute 和 float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),只要设置了position: absolute 或 float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。

      就算我们显示地设置display:inline或者display:block,也仍然无效(float在IE6 下的双倍边距bug就是利用添加display:inline来解决的)。

      值得注意的是,position: relative却不改变display的类型。

      引申

      position属性为absolute或fixed的元素,重排的开销会比较小,因为不用考虑它对其他元素的影响

      这一条规则可以解释:为什么在移动开发时尽量使用Position:absolute;而不是float来浮动元素

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录