Question

我在网页中有三个元素。它们都是相同的宽度：

h1, ul, p {
    width: 900px;
    margin: 0 auto;
    }

他们看起来像这样：

                        +----------------------------------+
                        |             Heading              |
                        |                                  |
                        +----------------------------------+
                        +----------------------------------+
                        | Home | About | Whatever | Else   |
                        +----------------------------------+
                        +----------------------------------+
                        | Bla bla bla? Bla bla bla, bla    |
                        | bla bla. Bla bla bla: "Bla bla." |
                        +----------------------------------+

为什么我需要将它们全部包装在wrapper-div中？

<div id="wrapper">  ⬅︎ What for?
    <h1></h1>
    <ul></ul>
    <p></p>
</div>

数十亿个网页就是这样做的，但我不明白为什么这是必要的。

Answer 1

您可以将css应用于包装器div

#wrapper {
   width: 900px;
   margin: 0 auto;
}

无需将CSS应用于每个元素。

Answer 2

您可以简单地将CSS规则应用于您的包装器，因此您不必单独将其应用于所有内容。

我们使用包装来＆＃34;包含＆＃34;东西，只设置一次宽度，高度和其他位置。因此，我们不需要为该包装器或网站上的每个其他可能元素编写CSS规则。

Answer 3

对于一个包装器div没有“需要”，因为它可能会增加代码的可读性，并且它可能使用javascript或css做适用于所有div的事情变得更容易。大多数这些好处都可以通过适当的类名来实现！

Answer 4

为什么经常使用包装？

您只需设置一次宽度。
易于集中在页面上。
更轻松地添加侧边栏。
响应式设计/模板。

Answer 5

正如您已经猜到的那样，包装div通常不是必需的。那为什么经常使用？简单回答：Internet Explorer。

早期版本的Internet Explorer中的body元素不支持某些CSS样式。使用包装器div是处理此问题的常用解决方案。

即使这不再是一个问题，旧的习惯也很难，许多开发人员在创建新页面时仍然使用这种技术。当旧页面得到更新时，没有什么动力从它们中删除现有的包装器div。

随着时间的推移，我想你会越来越少地使用这种技术。

有关更深入的讨论，请参阅的 http://tjvantoll.com/2013/01/05/is-it-safe-to-use-the-body-as-a-top-level-container-yet/

为什么Web内容包装在包装器div中？

5 个答案: