Question

我目前正在学习html / css，并注意到一种常见的技术是在body标签的根目录中放置一个通用的容器div：

<html>
  <head>
    ...
  </head>
  <body>
    <div id="container">
      ...
    </div>
  </body>
</html>

这样做是否有正当理由？为什么css不能仅引用body标签？

Answer 1

容器div，有时是内容div，几乎总是用于允许更复杂的CSS样式。身体标签在某些方面是特殊的。浏览器并不像普通的div那样对待它;它的位置和尺寸与浏览器窗口相关联。

但是容器div只是一个div，你可以用边距和边框来设置它。您可以为其指定固定宽度，并可以使用margin-left: auto; margin-right: auto。

对其进行居中

Answer 2

这种方法可让您更灵活地设计整个内容的样式。有效地创建两个可以设计样式的容器。用作背景的HTML Body标签，以及包含您内容的容器ID的div。

然后，您可以在页面中定位内容，同时为背景或其他效果设置样式而不会出现问题。把它当作内容的“框架”。

Answer 3

这是前端编码员犯下的最大坏习惯之一。

我上面的所有答案都是错的。身体确实需要宽度，边距，边框等，并应作为您的初始容器。 html元素应该像你想象的那样充当你的背景“画布”。在我做过的几十个网站中，我只需要使用一次容器div。

我愿意成为那些使用容器div的同样编码器也会在div中乱丢他们的标记 - 其他地方。

不要这样做。谨慎使用div并以精益标记为目标。

- = - = - 更新 - 不确定SO有什么问题，因为我可以在5年前编辑这个答案，但我无法回复评论，因为它说我需要50个代表才能这样做。因此，我将在此处收到的回复中添加我的答案。 - = - = -

我刚刚在答案后多年才发现这一点，并且看到有一些后续回复。当然，你开玩笑吧？

您为我的域找到的已安装的占位符网站，我从未声称是我的标记或样式，或者甚至在我的帖子中提到过，显然是一个基本的CMS安装，没有一个内容的话（它说的很多主页）。那不是我的标记和造型。那是Silverstripe的默认模板。我不相信它。但是，这可能只是我能想到的两个例子中的一个，这需要一个容器div。

示例1：旨在容纳未知数的通用模板。在这种情况下，您看到一个默认的CMS模板，在div内部的div内有div。

恐怖。

示例2：三列布局以使页脚正确清除（我认为这可能是我需要一个容器div的场景，很难记住，因为那是多年前的事。）

我刚为我的域构建（甚至还没有完成）主题并开始加载内容。对于这个易于实现的语义标记示例，请单击链接。

坦率地说，令我感到困惑的是，人们认为你实际上需要一个容器div并且在尝试只是一个身体之前先从一个容器div开始。正如我听说CSS规范的原始作者之一曾经解释过的那样，机构被认为是“初始容器”。

应该根据需要添加标记，而不是因为这只是你看到它的方式。

Answer 4

我最常见的原因是：

Answer 5

某些浏览器（＆lt; cough＆gt; Internet Explorer）不支持正文上的某些属性，尤其是width和max-width。

Answer 6

我知道这是一个老问题，但我在重新设计网站时遇到了这个问题。特洛伊达尔马索让我思考。他提出了一个很好的观点。所以，我开始看看我是否可以在没有容器div的情况下使用它。

当我设定身体的宽度时，我可以。在我的情况下为960px。

这是我使用的css：

html {
  text-align:center;
}

body {
  margin: 0 auto;
  width: 960px;
}

这很好地将内联块也居中，它也具有固定的宽度。

希望这对任何人都有用。

Answer 7

div标签用于为网页设置样式，使其看起来对网站的用户或受众具有视觉吸引力。在html中使用container-div会使网站看起来更专业，更有吸引力，因此更多人会想要浏览你的页面。

Answer 8

那么，

容器div非常好用，因为如果你想让网站居中，你就不能用body或html来做...但你可以用div来实现。容器为什么？它通常被使用，只是因为代码必须是干净和可读的。所以这就是容器...它包含所有网站，以防你想要乱用它：）

祝你好运

Answer 9

大多数浏览器默认采用网页大小。因此，某些页面在不同的浏览器中不会显示相同的内容。因此，通过使用用户可以更改特定的HTML元素。例如，用户可以添加特定HTML标签的边距，大小，宽度，高度等。