Chrome开发工具支持flexbox CSS吗?

Chrome开发工具支持flexbox CSS吗?,css,google-chrome-devtools,flexbox,Css,Google Chrome Devtools,Flexbox,在此处检查具有块样式的图元时,CDT将高度特性显示为灰色: 文档说,dimmed表示继承的属性不影响元素,但很明显,高度值是继承的,但会影响元素 那么,我们应该如何使用CDT追踪这种风格的来源呢 /* full example http://s.codepen.io/WhitneyLand/debug/zGpZbN */ <div class="block block-fixed"> aaa </div> /*完整示例http://s.codepen.io/

在此处检查具有块样式的图元时,CDT将高度特性显示为灰色:

文档说,dimmed表示继承的属性不影响元素,但很明显,高度值是继承的,但会影响元素

那么,我们应该如何使用CDT追踪这种风格的来源呢

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

发生这种情况是因为该高度是根据
div的内容计算的。即“aaa”文本。添加
字体大小:40px
.block fixed
类将计算的高度增加到47px。在本例中,它会暗显,因为它是经过计算的。

您看到的
高度
是一个
计算的
样式属性(通过浏览器的渲染引擎计算),而不是声明/继承的属性。当您将鼠标悬停在DOM inspector中的total元素上时,您会注意到div的“高度”是19px-18px高,底边是1px。

Yes。它确实支持。@Bhojendra-Nepal引用与我发布的代码相关的内容?但这不是文档所说的dimmed的意思吗?另外,你应该如何从CDT中得出你所说的,而不是仅仅知道?@Leewitney Docs,其中刚刚更新:Read closer-选中show inherited(显示继承属性)框时,继承属性仅以灰色字体显示,-
height(高度)
属性以灰色字体显示,而不选中该框。除此之外,CSS中没有应用18px的高度,因此它不能继承。这是一个在CSS中没有指定的计算属性(通过浏览器)。我承认,在开发工具文档中(我遇到过)没有任何地方可以解释这种行为,但它可能没有任何其他含义,因此这是一个非常简单的推断。CSS对于我来说很难提供精确的工具文档。我认为从头到尾阅读整个规范将有助于巩固它。阅读整个CSS规范对你帮助甚微-有一个基本的了解,然后使用它,亲眼看看它是如何工作的,这将使它巩固得更好。我更新了文档以帮助澄清这一点。如果这不够好,请拉取请求: