有人可以告诉我为什么这个虚线框显示在开发工具上以及如何摆脱它吗？

Question

我无法对齐东西，因为有时我会遇到这些紫色的盒子。有人可以告诉我为什么以及如何摆脱它吗？

我还没有尝试过任何东西，因为我不知道如何解决它。

Answer 1

这称为 flexbox 覆盖，是 Chrome 开发者工具的一项功能，用于 检查和调试 CSS Flexbox 布局。

它只是一个帮助开发人员可视化和调试使用 Flexbox 布局模式的网页上元素布局的工具。它允许开发人员查看元素如何沿主轴和交叉轴分布，以及它们的大小和位置。

需要注意的是，Flexbox Overlay 不会影响 DOM 中元素的渲染方式。它纯粹是一种视觉辅助，让开发人员了解他们的 CSS Flexbox 属性如何影响页面上元素的布局。

换句话说，Flexbox Overlay 是调试和微调网页布局的有用工具，但它不会修改 DOM 中元素的实际布局。

请参阅调整 Flexbox 覆盖颜色以对此进行额外控制。

Answer 2

为了比当前现有的答案更简洁，您可以转到开发工具中的

Layout

窗格并关闭

Flexbox overlays

和

Grid overlays

中的选项。