容器不包含任何东西

Question

我有一个页面，我希望页面宽度适应浏览器。我认为，如果以div开头，例如名为“容器”，我将整页放入其中并告诉div使用width: 100%;完全填充浏览器宽度，然后将全部调整大小。但它没有，div甚至不包含页面，即使它在里面也是如此。

<header>
  <div id="header"> 
    <table width="100%" border="0">
       ...
    </table>
  </div>
</header>

Answer 1

您正在寻找的行为来自display:block。这种情况在默认情况下已经发生 - 这只是understanding how it works的问题。

您可以尝试使用div上方/外部的两个元素。

尝试在CSS中执行此操作：

html {
    background: orange;
}
body {
    background: blue;
}

然后将此样式提供给div：

div {
    width: 300px;
    background: white;
}

现在，在您的页面上，按键盘上的Control和-（Windows）或 Command和-（Mac）几次。注意背景颜色的表现。

最后，在width:100%;上设置div，而不是上面列出的值。

尝试这些组合，最终你会看到：

• 默认情况下，某些元素为display:block。
• 所有display:block元素都使用可用宽度的每一位，除非另有说明。
• 每个元素的“可用宽度”是其父元素（也称为其容器）。
• 最顶层元素（html）的“可用宽度”是窗口的宽度。

一些外卖笔记应该是：

• 您不需要div来执行此操作 - 这是额外的代码和not semantic。
• 如果任何元素的宽度明确设置为100% 或以外的任何其他元素，则其显示类型不是block，那么它的后代（子代，孙子等，其宽度为窗口的宽度。