1
Flexbox 属性
监控 flex-direction、justify-content、align-items、flex-wrap、gap 和 order 变化。
50 测试用例
布局
页面布局是任何界面的脊柱：它决定了访客视线落在何处、如何导航以及完成任务需要多少努力。一次布局回归绝非装饰性问题。一个「支付」按钮因 padding 修改而被推到首屏之下，意味着转化率即时下滑；一个管理后台的表格列出现重叠，对业务工位而言是运营层面的风险。布局回归通常源于无意的级联效应：为修正某个特例而调整全局 padding、添加一个 overflow: hidden 破坏了 margin collapse、对 flexbox 的重构反转了 item 顺序、CSS grid 的修改使整个商品目录错位，或新增组件无声地推挤相邻内容。CSS 盒模型的复杂性，加上 flexbox、grid、绝对定位与 float 的嵌套，让这些交互即便对资深开发人员也难以预测。常规的自动化测试管道只验证元素是否存在于 DOM 中，并不验证它们在视觉上是否出现在正确位置。Delta-QA 弥补了这一盲区：它在每次修改前后对完整页面进行截图比较，并突出显示位置、尺寸或对齐方式发生变化的每一处区域。视觉报告清晰呈现位移、重叠以及越出 viewport 的元素，使您可以验证一次 CSS 重构是否未破坏应用的其他部分，无需手动重新检查每个模板，从而提高视觉回归与页面对比的效率。
我们检测什么
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 对比截图，高亮区块间距翻倍——整体布局偏移在差异图中清晰可见。