1
Flexbox 属性
监控 flex-direction、justify-content、align-items、flex-wrap、gap 和 order 变化。
50 测试用例
布局
布局变化是最具破坏性的视觉回归之一。移位的元素、损坏的网格或折叠的边距可能完全改变用户体验。Delta-QA 分析元素间的空间关系以捕捉每个布局偏移。
我们检测什么
2
CSS Grid 变化
检测 grid-template 修改、轨道尺寸变化和 grid-area 重新分配。
3
定位和堆叠
捕捉 position 属性变化（static、relative、absolute、fixed、sticky）及其对元素放置的影响。
4
外边距和内边距
跟踪间距变化，包括可能导致意外布局偏移的 margin collapse 场景。
5
盒模型和尺寸
检测 width、height、min/max 约束和 box-sizing 变化。
6
Float 和 clear
识别基于浮动的布局变化和可能导致内容重排的 clearfix 行为。
实际场景
🎯
内边距偏移了一切
一位开发者修复注册表单的对齐问题，改动了 input 的全局 padding。副作用：支付表单的字段变大了，"支付"按钮被推到了首屏以下。在移动端更严重——表单直接溢出屏幕。QA 验证了注册表单（被修改的那个），却没检查支付表单。Delta-QA 对比所有页面的截图，高亮支付表单上的偏移——"支付"按钮从视口中消失的问题在差异图中一目了然。
⚠️
Flexbox 反转了顺序
一位开发者重构定价页的 CSS，意外反转了套餐的显示顺序。三个方案现在变成了企业版、专业版、免费版——从右到左。访客首先看到最贵的方案，心理锚定效应被颠倒了。上线很紧急，只做了最基本的测试：三个方案都在，点击能用，就发布了。Delta-QA 对比截图，检测到区块位置变化——反转清晰可见。
💡
悄无声息的外边距塌陷
一位开发者在容器上添加 overflow: hidden 来修复溢出问题。意外后果：CSS 外边距合并机制被破坏，各区块之间的间距突然翻倍。页面多出了 200px，各区块看起来彼此分离。团队信赖自动化测试流水线，但它不覆盖视觉回归。Delta-QA 对比截图，高亮区块间距翻倍——整体布局偏移在差异图中清晰可见。