css - 父容器宽度可以扩展到子容器的缩放内容大小吗？

Question

我有一个基本问题，即缩放元素是否会影响其容器的尺寸以及如何影响。

我遇到的问题是这个 float 标签 Codepen我做了。当标签 float 时，它会转换到位并按比例缩小。

但是，它的容器保持相同的大小，导致很大的差距。

这是笔的标记:

<div class="floating-label active">
  <input class="floating-label__input" type="text" name="firstName" autocomplete="off" required placeholder=" "/>
      <div class="floating-label__outline">
        <div class="floating-label__leading"></div>

        <div class="floating-label__notch">
          <label class="floating-label__label" for="firstName">Label long text</label>
        </div>

        <div class="floating-label__trailing"></div>
      </div>
    </div>
</div>

.floating-label__notch 是 float 标签的容器。当标签按比例缩小时，它不会缩小其宽度。

Answer 1

不，缩放元素不可能影响它的容器。这将涉及对所有相关元素进行大量性能调整和重新计算，而过渡正试图减轻这些影响。通过不影响周围的元素，过渡比缩放宽度、高度等具有巨大的性能优势。

如果你想缩放某些东西并让它的大小影响其他元素，你必须缩放字体大小、高度或宽度。尽管不用说它更注重性能。