Chrome 开发工具是不是支持 flexbox CSS？

Posted 2023-03-06

【中文标题】Chrome 开发工具是不是支持 flexbox CSS？

【英文标题】：Do Chrome Dev Tools support flexbox CSS?Chrome 开发工具是否支持 flexbox CSS？

【发布时间】：2015-09-15 04:37:35

【问题描述】：

在此处检查具有块样式的元素时，CDT 将 height 属性显示为暗色： http://s.codepen.io/WhitneyLand/debug/zGpZbN

文档说 dimmed 表示继承的属性不影响元素，但显然高度值是继承的，但会影响元素。

那么，我们应该如何使用 CDT 来追踪这种样式的来源？

/* full example http://s.codepen.io/WhitneyLand/debug/zGpZbN */
<div class="block block-fixed">
    aaa
</div>

【问题讨论】：

是的。它确实支持。

@Bhojendra Nepal 引用与我发布的代码有关？

【参考方案1】：

这是因为高度是根据div 的内容计算得出的。即，'aaa' 文本。将font-size: 40px; 添加到.block-fixed 类会将计算的高度增加到47px。在这种情况下，它会变暗，因为它是经过计算的。

【讨论】：

这不是文档所说的暗淡应该意味着什么？ ***.com/a/6351378/700206 另外，您应该如何从 CDT 中得出您所说的，而不是仅仅知道？

@LeeWhitney 刚刚更新的文档：github.com/GoogleChrome/devtools-docs/commit/…

【参考方案2】：

您看到的height 是computed 样式属性（通过浏览器的渲染引擎计算），而不是声明/继承的。当您将鼠标悬停在 DOM 检查器中的整个元素上时，您会注意到，该 div 的“高度”为 19px - 18px 高和 1px 底部边框。

【讨论】：

读取较近的继承的属性仅在cived font 中显示，当检查显示继承的框 - height属性以暗淡的字体显示，没有该框被检查.除此之外，您的 CSS 中没有任何地方应用 18px 的高度，因此它不能是 inherited。它是一个未在 CSS 中指定的计算属性（由浏览器）。

我承认，开发工具文档（我遇到过的）中没有任何地方解释这种行为，但它没有任何其他可能的含义，所以这是一个非常简单的推论。

CSS 对我来说很难有精确的工具文档。我认为端到端阅读整个规范将有助于巩固它。

阅读整个 CSS 规范对您的帮助很小 - 有一个基本的了解，然后使用它并亲眼看看它是如何工作的，会更好地巩固它。

我更新了文档以帮助澄清这一点。如果这还不够好，请拉请求：github.com/GoogleChrome/devtools-docs/commit/…