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

文章预览

大厂技术    高级前端    Node进阶 点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 calc() 用法介绍 CSS 中的 calc() 函数可以执行元素属性的计算。 首先简单介绍一下 CSS 中的 calc() 函数的用法。 语法： property :  calc ( expression ); 这里的 expression 可以包含加号 ( + )、减号 ( - )、乘号 ( * )、除号 ( / )，以及可以进行数学运算的数字和长度单位。 使用示例： 组合长度单位 ： .element  {    width :  calc ( 100vh  -  20px ); } 嵌套使用 ： .element  {    margin :  calc ( 60px  + calc( 10%  *  2 )); } 初步分析 calc() 是否引起重排重绘 首先介绍一下重排重绘： 重排（Reflow） 重排是指浏览器重新计算页面元素的尺寸和布局的过程。当页面的 布局属性发生变化 时，浏览器需要 重新计算 并 重新排列 元素，这个过程称为重排。重排可能会引起页面的重 ………………………………