专栏名称: 前端大全
分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯
今天看啥  ›  专栏  ›  前端大全

CSS 函数 calc() 会引起重排重绘吗

前端大全  · 公众号  · 前端  · 2024-11-08 11:50

文章预览

作者:——窗边的anini https://juejin.cn/post/7374716539679359003 calc() 用法介绍 CSS 中的 calc() 函数可以执行元素属性的计算。 首先简单介绍一下 CSS 中的 calc() 函数的用法。 语法: property :  calc ( expression ); 这里的 expression 可以包含加号 ( + )、减号 ( - )、乘号 ( * )、除号 ( / ),以及可以进行数学运算的数字和长度单位。 使用示例: 组合长度单位 : .element  {    width :  calc ( 100vh  -  20px ); } 嵌套使用 : .element  {    margin :  calc ( 60px  + calc( 10%  *  2 )); } 初步分析 calc() 是否引起重排重绘 首先介绍一下重排重绘: 重排(Reflow) 重排是指浏览器重新计算页面元素的尺寸和布局的过程。当页面的 布局属性发生变化 时,浏览器需要 重新计算 并 重新排列 元素,这个过程称为重排。重排可能会引起页面的重新渲染,因为它影响元素的几何属性。 引起重排的 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览