Question

我很想知道相对CSS长度值如何进行计算。所以我创建了这个pen。以下是轻松的代码。

HTML：

<div class="parent">
PARENT
    <div class="child">
    CHILD
        <div class="super-child">
        SUPER CHILD
        </div>
    </div>
</div>

CSS：

div {
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  border:1px solid white;
  background: red;
  width: 300px;
  height:100px;
  padding:20px;
  box-shadow:0 0 10px 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Try this for compound em values */
  /* font-size:2em; */ 
  /* Notice how the calculation happens from parent to innermost child*/

  /* Try this for rem */
  /* font-size:2rem; */
}

当我取消注释时，font-size:2em转换工作从parent到super-child，并且在回复后，它会以相同的顺序发生，从父级到超级子级。正如所料。好。

对于font-size:2rem取消注释后，所有文本的字体大小会按预期一起增加，但在对其进行评论后，font-size的缩减从parent发送到{{1} }}。

我想知道为什么？由于super-child值仅取决于根元素值，为什么引擎会以这种方式计算？它是不是已经减少了它们的字体大小，因为它为它们增加了它？

注意 - 我在JSBin中尝试了相同的操作，它显示了不同的行为，因为 JSBin在每次CSS更改后重新加载整个预览框架。而在Codepen中，就好像只更新了CSS而不重新加载整个预览框架，就像打开开发人员工具并启用或禁用属性一样。

奇怪的（可能）CSS rem计算行为与动画

0 个答案: