修复div块存在的Cumulative Layout Shift（CLS）布局偏移问题

• animate-box入场动画导致的偏移：该类通常用于实现元素入场动效，如果动效实现时使用了transform之外的可触发布局重排的属性（如margin、top/left定位调整），或是动画初始状态未给元素预留固定占位空间，动画触发时元素尺寸/位置变化会挤压周围布局产生CLS。如果动画存在延迟加载/触发逻辑，页面先渲染无该元素的布局，动画执行时元素插入也会产生偏移。
• SVG图片尺寸计算异常：即便你给img标签写了固定宽高属性，若SVG文件本身未配置viewBox属性，或是CSS中对图片设置了max-width:100%等响应式规则但未匹配对应比例的aspect-ratio属性，浏览器在加载完SVG内容前可能无法正确计算渲染尺寸，会先占用错误甚至为0的高度，图片加载完成后撑开容器导致偏移。另外asp-append-version="true"会在资源url后追加版本号，首次无缓存访问时图片加载时序晚于DOM渲染，也会提高偏移概率，建议给图片补充aspect-ratio: 208/78的CSS声明，确保浏览器提前预留对应比例的占位空间。
• 三列布局高度不一致的影响：第三列的h3和p标签单独设置了行内margin-top，和前两列的结构高度逻辑不同。如果前两列图片加载速度慢，初始状态前两列高度远低于第三列，等图片加载完成后前两列高度撑开，会导致整个row容器的高度变化，挤压下方内容产生偏移。如果是响应式布局，在小于md的断点下col-md-4会变为100%宽度，若未给每个列容器设置固定最小高度，列高度变化也会互相影响产生偏移。
• 网页字体加载切换导致的偏移：h3、p标签内的文字如果使用了自定义网页字体，字体加载完成前后的文字宽度、行高存在差异，会导致.desc容器高度变化产生CLS。可以给对应字体配置font-display: fallback规则，或是提前预加载关键字体、设置和目标字体尺寸接近的后备字体，降低字体切换时的尺寸差异。
• 异步CSS加载导致的布局重排：如果colorlib-services、container、row、col-md-4这些框架相关的样式是在异步加载的CSS文件中定义的，CSS加载完成前浏览器会用默认样式渲染：三个列会从上到下堆叠，整个块高度很高，等CSS加载完成后列变为横向排列，块高度骤降，下方内容上移会产生严重CLS。建议把该模块相关的关键CSS内联到页面head中，避免CSS加载延迟导致的布局变化。

内容的提问来源于stack exchange，提问作者JMR