修改浮动元素宽高之后是否会触发重排？

作者站长头像
站长
· 阅读数 4

周所周知，设置浮动属性的图片元素会使相邻文本内容对其环绕。

那么对一个已经设置了浮动属性的图片元素，进行反复修改宽高的操作，是否会触发大规模的重排？

修改浮动元素宽高之后是否会触发重排？

回复
1个回答
avatar
test
2024-07-09

影响布局，我赌一手会重排。接下来就是验证了。

从分层来看，是在同一层answer image

从 rendering 来看，paint 应该就是常说的重绘，layout 就是常说的重排answer image

补充上述测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box{}
        .box .float{float: left;width: 80px;height: 100px;}
        .box .float[data-width="1"]{width: 180px;}
        .box .float[data-width="2"]{width: 280px;}
        .box .float[data-width="3"]{width: 380px;}
        .box .float[data-height="1"]{height: 180px;}
        .box .float[data-height="2"]{height: 280px;}
        .box .float[data-height="3"]{height: 380px;}
    </style>
    <script>
        setInterval(()=>{
            img.dataset.height = (Number(img.dataset.height || 0) + 1) % 3 
        }, 1000 * 3)
    </script>
    <div>
        https://www.lilnong.top/cors/linong
    </div>
    <div>
        https://segmentfault.com/u/linong
    </div>
    
    <hr>
    <div class="box">
        <img id="img" src="https://cdns.jsrun.net/css/img/logo@2x.png" alt="" class="float">
        我是一个粉刷匠，粉刷本领强。
    念奴娇·宜雨亭咏千叶海棠原文及赏析
    
    　　念奴娇·宜雨亭咏千叶海棠
    
    　　作者：张鎡
    
    　　朝代：宋朝
    
    　　绿云影里，把明霞织就，千重文绣。紫腻红娇扶不起，好是未开时候。半怯春寒，半便晴色，养得胭脂透。小亭人静，嫩莺啼破清昼。
    
    　　犹记携手芳阴，一枝斜戴，娇艳波双秀。小语轻怜花总见，争得似花长久。醉浅休归，夜深同睡，明日还相守。免教春去，断肠空叹诗瘦。
        
    </div>
    <div>
        https://www.lilnong.top/cors/linong
    </div>
    <div>
        https://segmentfault.com/u/linong
    </div>
</body>
</html>

.box{position: absolute;} 之后可以看到 layout 没了。

answer image

更新时间：2023年2月24日09

我又来了，我记得有个网站可以查询是否影响重绘。属性名称、触发重排（Layout）、触发重绘（Paint）和触发复合层（Composite）

但是查找了一番没有合适的结果，最后通过 chatgpt 找了一个网站 https://csstriggers.com/ answer image。

不得不说，搜索引擎危险了。answer image

当然，还找到了一些类似的网站，我看了，挺多资源都失效了。所以图片我就隐藏了 ![image.png](/img/bVc6xNV)

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容