I am currently learning html/css, and have noticed a common technique is to place a generic container div in the root of the body tag:
我目前正在学习html/css，并且注意到一个常见的技术是在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标签呢?
9 个解决方案
#1
58
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你可以用边框和边框来设计它。你可以给它一个固定的宽度，你可以把它居中边缘左:auto;margin-right:汽车。
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的外部，但是不能放在主体的外部，允许在边框的外部放置内容。
#2
10
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的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.
这样，您就可以在页面中定位内容，同时不需要设置背景或其他效果。把它看作内容的“框架”。
#3
2
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.
我愿意让这些使用容器divs的编码人员也在divs中使用divs的标记——在其他任何地方。
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. -=-=-
-=-更新-不确定有什么问题，因为我可以在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模板，在divs内部有divs。
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.
我只是构建了一个主题(甚至还没有完成)，并开始加载内容。对于这个容易实现的语义标记示例，单击链接。
http://www.bitbeyond.com
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.
标记应该根据需要添加，而不是因为您看到的那样做。
#4
1
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.
- 因此布局可以通过将文本对齐:center应用到主体，然后是margin: auto to the left and right of the container div来居中。
#5
1
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.
某些浏览器( <咳嗽> Internet Explorer)不支持主体上的某些属性，特别是宽度和最大宽度。
#6
1
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.
希望这对任何人都有用。
#7
0
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中使用容器-div会使网站看起来更专业、更吸引人，因此会有更多的人想要浏览你的网页。
#8
0
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。但是你可以，和天后一起。为什么集装箱?它通常使用，只是因为代码本身必须是干净和可读的。这是容器……它包含了所有的网站，以防你想把它弄乱。
Good luck
祝你好运
#9
-2
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.
大多数浏览器默认采用web页面大小。所以，有时候页面在不同的浏览器中不会显示相同的内容。因此，通过使用用户可以更改特定的HTML元素。例如，用户可以添加特定HTML标签的边距、大小、宽度、高度等。
#1
58
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你可以用边框和边框来设计它。你可以给它一个固定的宽度，你可以把它居中边缘左:auto;margin-right:汽车。
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的外部，但是不能放在主体的外部，允许在边框的外部放置内容。
#2
10
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的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.
这样，您就可以在页面中定位内容，同时不需要设置背景或其他效果。把它看作内容的“框架”。
#3
2
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.
我愿意让这些使用容器divs的编码人员也在divs中使用divs的标记——在其他任何地方。
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. -=-=-
-=-更新-不确定有什么问题，因为我可以在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模板，在divs内部有divs。
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.
我只是构建了一个主题(甚至还没有完成)，并开始加载内容。对于这个容易实现的语义标记示例，单击链接。
http://www.bitbeyond.com
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.
标记应该根据需要添加，而不是因为您看到的那样做。
#4
1
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.
- 因此布局可以通过将文本对齐:center应用到主体，然后是margin: auto to the left and right of the container div来居中。
#5
1
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.
某些浏览器( <咳嗽> Internet Explorer)不支持主体上的某些属性，特别是宽度和最大宽度。
#6
1
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.
希望这对任何人都有用。
#7
0
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中使用容器-div会使网站看起来更专业、更吸引人，因此会有更多的人想要浏览你的网页。
#8
0
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。但是你可以，和天后一起。为什么集装箱?它通常使用，只是因为代码本身必须是干净和可读的。这是容器……它包含了所有的网站，以防你想把它弄乱。
Good luck
祝你好运
#9
-2
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.
大多数浏览器默认采用web页面大小。所以，有时候页面在不同的浏览器中不会显示相同的内容。因此，通过使用用户可以更改特定的HTML元素。例如，用户可以添加特定HTML标签的边距、大小、宽度、高度等。