Chrome Dev Tools是否支持flexbox CSS？

Question

Chrome Dev Tools是否支持flexbox CSS？

4

检查这里的块样式元素时，CDT显示高度属性为暗淡： http://s.codepen.io/WhitneyLand/debug/zGpZbN 文档中说，暗淡表示未影响元素的继承属性，然而很明显高度值是继承的，但却影响了元素。

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

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

- whitneyland

是的，它支持。 - Bhojendra Rauniyar

@Bhojendra Nepal，与我发布的代码相关的引用？ - whitneyland

2个回答

1

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

- Adam Jenkins

1

请仔细阅读 - 继承的属性只有在选中“显示继承”框时才以淡色字体显示 - height 属性在未选中该框时以淡色字体显示。除此之外，在您的 CSS 中没有应用 18px 的高度，因此它不能被 inherited 继承。这是一个由浏览器计算出来的属性，没有在 CSS 中指定。 - Adam Jenkins

1

我承认在开发工具文档中（至少我所接触到的）没有解释这种行为，但它不可能有其他意思，因此这是一个非常直接的推断。 - Adam Jenkins

CSS对我来说很难，因为工具文档非常精确。我认为从头到尾阅读整个规范会有助于巩固理解。 - whitneyland

1

阅读整个CSS规范对你帮助不大 - 具备基本的理解，然后亲自使用并观察它如何运作会更好地巩固它。 - Adam Jenkins

3

我已经更新了文档以帮助澄清这个问题。如果不够好，请提出拉取请求：https://github.com/GoogleChrome/devtools-docs/commit/d1903ffc30a80a2801fe3339ac779e96abd66243 - Paul Irish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Joy · Accepted Answer

这是因为高度是从

的内容计算出来的，即'aaa'文本。将.block-fixed类添加font-size: 40px;会使计算出的高度增加到47px。在这种情况下，它被淡化了，因为它是计算出来的。