编程

CSS 中的宽度与高度

433 2024-01-02 02:48:00

本文将介绍 CSS 中的 widthheight 是如何工作的。

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

例如,以以下代码为例:

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

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

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

  • width:我的父级元素有多宽?
  • height:我的子元素有多高?

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

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

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

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

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