为什么要在 HTML 中使用容器 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/354739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why should I use a container div in HTML?
提问by user44810
I have noticed a common technique is to place a generic container div in the root of the body tag:
我注意到一个常见的技术是在 body 标签的根中放置一个通用容器 div：
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
Is there a valid reason for doing this? Why can't the css just reference the body tag?
这样做有正当理由吗？为什么css不能只引用body标签？
回答by Jonathan Tran
The container div, and sometimes content div, are almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.
容器 div，有时是内容 div，几乎总是用于允许更复杂的 CSS 样式。body 标签在某些方面是特殊的。浏览器不会把它当作普通的 div；它的位置和尺寸与浏览器窗口相关。
But a container div is just a div and you can style it with margins and borders. You can give it a fixed width, and you can center it with margin-left: auto; margin-right: auto.
但是容器 div 只是一个 div，您可以使用边距和边框对其进行样式设置。你可以给它一个固定的宽度，你可以用margin-left: auto; margin-right: auto.
Plus, content, like a copyright notice for example, can go on the outside of the container div, but it can't go on the outside of the body, allowing for content on the outside of a border.
另外，内容（例如版权声明）可以放在容器 div 的外部，但不能放在正文的外部，从而允许内容位于边框的外部。
回答by Mitchel Sellers
THis method allows you to have more flexibility of styling your entire content. Effectivly creating two containers that you can style. THe HTML Body tag which serves as your background, and the div with an id of container which contains your content.
这种方法使您可以更灵活地设置整个内容的样式。有效地创建两个您可以设计样式的容器。用作背景的 HTML Body 标记，以及包含您的内容的 id 为 container 的 div。
This then allows you to position your content within the page, while styling a background or other effects without issue. THink of it as a "Frame" for the content.
然后，这允许您在页面内定位您的内容，同时设置背景或其他效果没有问题。将其视为内容的“框架”。
回答by Troy Dalmasso
This is one of the biggest bad habits perpetrated by front end coders.
这是前端编码人员犯下的最大的坏习惯之一。
All the answers above me are wrong. The body does take a width, margins, borders, etc and should act as your initial container. The html element should act as your background "canvas" as it was intended. In dozens of sites I've done I've only had to use a container div once.
我上面的所有答案都是错误的。正文确实采用宽度、边距、边框等，应该作为您的初始容器。html 元素应按预期充当您的背景“画布”。在我做过的几十个站点中，我只需要使用一次容器 div。
I'd be willing to be that these same coders using container divs are also littering their markup with divs inside of divs--everywhere else.
我愿意让这些使用容器 div 的相同编码人员也在 div 内的 div 中乱扔他们的标记——在其他任何地方。
Dont' do it. Use divs sparingly and aim for lean markup.
不要这样做。谨慎使用 div 并以精益标记为目标。
-=-=- UPDATE - Not sure what's wrong with SO because I can edit this answer from 5 years ago but I can't reply to the comments as it says I need 50 Rep before I can do so. Accordingly, I'll add my answer to the replies it received here. -=-=-
-=-=- 更新 - 不确定 SO 有什么问题，因为我可以编辑 5 年前的这个答案，但我无法回复评论，因为它说我需要 50 名代表才能这样做。因此，我将在此处收到的答复中添加我的答案。-=-=-
I just found this, years after my answer, and see that there are some follow up replies. And, surely you jest?
我刚刚找到这个，在我回答几年后，看到有一些后续回复。而且，你肯定是在开玩笑吗？
The installed placeholder site you found for my domain, which I never claimed was my markup or styling, or even mentioned in my post, was very clearly a basic CMS install with not one word of content (it said as much on the homepage). That was not my markup and styling. That was the Silverstripe default template. And I take no credit for it. It is, though, perhaps one of only two examples I can think of that would necessitate a container div.
您为我的域找到的已安装占位符站点，我从未声称它是我的标记或样式，甚至在我的帖子中也没有提到，很明显是一个基本的 CMS 安装，没有一个词的内容（它在主页上说了这么多）。那不是我的标记和样式。那是 Silverstripe 默认模板。我不相信它。不过，这可能是我能想到的需要容器 div 的仅有的两个示例之一。
Example 1: A generic template designed to accommodate unknowns. In this case you were seeing a default CMS template that had divs inside of divs inside of divs.
示例 1：设计用于容纳未知数的通用模板。在这种情况下，您会看到一个默认的 CMS 模板，该模板在 div 内有 div。
The horror.
惊恐的事件。
Example 2: A three column layout to get the footer to clear properly (I think this was probably the scenario I had that needed a container div, hard to remember because that was years ago.)
示例 2：用于正确清除页脚的三列布局（我认为这可能是我需要容器 div 的场景，很难记住，因为那是几年前的事了。）
I did just build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.
我刚刚为我的域构建了（甚至还没有完成）一个主题并开始加载内容。对于这个易于实现的语义标记示例，请单击链接。
Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".
坦率地说，我很困惑人们认为您实际上需要一个容器 div 并且在尝试使用 body 之前从一个容器开始。正如我听说 CSS 规范的一位原始作者曾经解释过的那样，主体旨在作为“初始容器”。
Markup should be added as needed, not because thats just the way you've seen it done.
应根据需要添加标记，而不是因为这只是您看到的方式。
回答by Quentin
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably widthand max-width.
某些浏览器（<咳嗽> Internet Explorer）不支持 body 上的某些属性，特别是width和max-width.
回答by Michael Albers
I know this is an old question, but i faced this issue myself redesigning a website. Troy Dalmasso got me thinking. He makes a good point. So, i started to see if i could get it working without a container div.
我知道这是一个老问题，但我自己重新设计网站时遇到了这个问题。特洛伊达尔马索让我思考。他提出了一个很好的观点。所以，我开始看看我是否可以在没有容器 div 的情况下工作。
I could when i set the width of the body. In my case to 960px.
当我设置身体的宽度时，我可以。在我的情况下为 960px。
This is the css i use:
这是我使用的css：
html {
text-align:center;
}
body {
margin: 0 auto;
width: 960px;
}
This nicely centers the inline-blocks which also have a fixed width.
这很好地将内联块居中，这些块也具有固定宽度。
Hope this is of use to anyone.
希望这对任何人都有用。
回答by da5id
The most common reasons for me are so that:
对我来说最常见的原因是：
- The layout can have a fixed width (yes, I know, I do a lot of work for designers who love fixed widths), and
- So the layout can be centered by applying text-align: center to the body and then margin: auto to the left and right of the container div.
- 布局可以有固定宽度（是的，我知道，我为喜欢固定宽度的设计师做了很多工作），并且
- 因此，布局可以通过将 text-align: center 应用于 body 然后将 margin: auto 应用于容器div的左侧和右侧来居中。
回答by kits
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. using container-div in html will make the website look more professional and attractive and therefore more people will want to explore your page.
div 标签用于设计网页样式，使其在视觉上对网站的用户或观众有吸引力。在 html 中使用 container-div 将使网站看起来更专业和有吸引力，因此更多的人会想要浏览您的页面。
回答by David Stan?ík
Well,
好，
The container div is very good to have, because if You want the site centered, You just can't do it just with body or html... But You can, with divs. Why container? Its usually used, just because the code itselve has to be clean and readable. So that is container... It contains all website, in case You want to mess with it around :)
容器 div 非常好，因为如果您希望站点居中，则不能仅使用 body 或 html 来实现...但是您可以使用 div。为什么是容器？它通常使用，只是因为代码本身必须干净且可读。所以这就是容器......它包含所有网站，以防你想把它弄乱:)
Good luck
祝你好运
回答by Max_pain
Most of the browser are taking web page size by default. So, sometime page will not display same in different browser. So, by using user can change for specific HTML element. For example, user can add margin, size, width, height etc of specific HTML tag.
大多数浏览器默认采用网页大小。因此，有时页面在不同的浏览器中不会显示相同。因此，通过使用用户可以更改特定的 HTML 元素。例如，用户可以添加特定 HTML 标签的边距、大小、宽度、高度等。
