CSS 中的宽度与高度

本文将介绍 CSS 中的 width 和 height 是如何工作的。

一句话总结就是：要想确定树的宽度 width，就要向上看，要想确定高度 height，就要向下看。

例如，以以下代码为例：

<html>
  <body>
    <div>My content</div>
    <style>
      div {
        width: 100%;
        height: 100%;
      }
    </style>
  </body>
</html>

width 向上查看标签树，并填充其父级元素可用的空间。在这种情况下，它将一直向上看 <body> 标记，该标记看起来像 <html> 标记，默认情况下，该标记具有文档的宽度。所以 <div> 也会这样做。

相反，height 看向它的子元素。它会问：“我内部的所有元素有多大？”然后自动填充这个高度。

这里的重点是，height: 100% 指的是“与我里面的所有元素一样高”，而不是“与我所在的父元素一样高”。

这就是为什么 width: 100% 与大部分人预期的一样：它占有了屏幕的全宽。而 height: 100% 并不像人们通常所希望的那样占有屏幕的全高。

同样，width 向外看，而 height 向内看。

老实说，我也被这样的问题困扰了多年。即使我后来知道了 width: 100% 能给我想要的结果，而 height: 100% 不能；我也完全不理解这是为什么。

这就是 CSS 的有趣之处。你可以有一个 95% 正确的思维模型，在你的职业生涯中有一个微小的[理解]差距，直到有一天它没有满足你的需求，然后一个下午过去了，你才注意到这一点。