blocks|key|1456679|text|容器div，有时是content+div，几乎总是用来实现更复杂的CSS样式。body标签在某些方面是特别的。浏览器不会将其视为普通的div；它的位置和尺寸与浏览器窗口捆绑在一起。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1456680|但是容器div只是一个div，你可以用边距和边框设置样式。你可以给它一个固定的宽度，你可以用margin-left:+auto;+margin-right:+auto居中。|offset|length|style|CODE|1456681|此外，内容，例如版权声明，可以放在容器div的外部，但不能放在正文的外部，允许内容放在边框的外部。|1456682|entityMap^0|0|1A|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

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.

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 <code>margin-left: auto; margin-right: auto</code>.

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.

blocks|key|1456614|text|THis方法允许您更灵活地设置整个内容的样式。有效地创建了两个可以样式化的容器。div+Body标签，作为你的背景，THe的id是容器，它包含你的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1456615|这样，您就可以在页面中定位内容，同时可以毫无问题地设置背景或其他效果的样式。它的THink作为一个“框架”的内容。|1456616|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

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.

blocks|key|1671830|text|某些浏览器(+Internet+Explorer)不支持主体上的某些属性，特别是width和max-width。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1671831|entityMap^0|14|5|1A|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Certain browsers (&lt;cough&gt; Internet Explorer) don't support certain properties on the body, notably <code>width</code> and <code>max-width</code>.

blocks|key|1671915|text|我知道这是一个老生常谈的问题，但我自己在重新设计网站时也遇到过这个问题。特洛伊·达尔马索让我开始思考。他说得很有道理。因此，我开始考虑是否可以在没有容器div的情况下让它工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671916|当我设置身体的宽度时，我可以。在我的例子中是960px。|1671917|这是我使用的css：|1671918|html+{
++text-align:center;
}

body+{
++margin:+0+auto;
++width:+960px;
}|code-block|syntax|javascript|1671919|这很好地将同样具有固定宽度的内联块居中。|1671920|希望这对任何人都有用。|1671921|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

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.

I could when i set the width of the body. In my case to 960px.

This is the css i use:

<pre><code>html {
 text-align:center;
}

body {
 margin: 0 auto;
 width: 960px;
}
</code></pre>

This nicely centers the inline-blocks which also have a fixed width.

Hope this is of use to anyone.

blocks|key|1456781|text|这是前端程序员犯下的最大的坏习惯之一。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1456782|我上面所有的答案都是错的。body会接受宽度、页边距、边框等，并且应该作为初始容器。html元素应该作为您的背景“画布”，因为它是预期的。在我做过的几十个站点中，我只使用过一次容器div。|1456783|我希望这些使用容器div的程序员也会在div中使用div标记--其他地方也是如此。|1456784|不要这样做。谨慎使用div，并以精简标记为目标。|1456785|-=-=-+UPDATE+-不确定so有什么问题，因为我可以编辑5年前的答案，但我不能回复评论，因为它说我需要50个代表才能这样做。因此，我将在这里将我的回答添加到它收到的回复中。-=-=-|1456786|我只是在我的答案几年后发现了这个，并看到了一些后续的回复。你一定是在开玩笑吧？|1456787|你为我的域名找到的已安装的占位符站点，我从未声称这是我的标记或样式，甚至在我的帖子中也没有提到，这显然是一个基本的CMS安装，没有一个字的内容(它在主页上说的一样多)。这不是我的标记和样式。这是Silverstripe默认模板。我不会为此负责的。不过，它可能是我能想到的仅有的两个需要容器div的例子之一。|1456788|示例1:设计用于容纳未知数的通用模板。在本例中，您看到的是默认的CMS模板，它在div中包含div，在div中包含div。|1456789|可怕的是。|1456790|示例2:一个三列的布局，让页脚正确地清晰(我想这可能是我需要容器div的场景，很难记住，因为那是几年前的事了)。|1456791|我刚刚为我的域名建立了一个主题，并开始加载内容。对于这个容易实现的语义标记示例，请单击该链接。|1456792|http://www.bitbeyond.com|offset|length|1456793|坦率地说，我感到困惑的是，人们认为你实际上需要一个容器div，甚至在尝试一个body之前就从一个容器div开始。正如我所听到的，CSS规范的一位原始作者曾经解释过，body的目的是作为“初始容器”。|1456794|标记应该根据需要添加，而不是因为这只是你所看到的方式。|1456795|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bitbeyond.com/^0|0|0|0|0|0|0|0|0|0|0|0|0|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1D|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1F|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1G|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1H|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1I|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1J|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1K|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1L|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1M|8|@]|9|@$X|1N|Y|1O|1|1P]]|A|$]]|$1|Z|3|10|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1R|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|1A]]]]

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.

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.

Dont' do it. Use divs sparingly and aim for lean markup.

-=-=-
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.
-=-=-

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.

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.

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.)

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.

<a href="http://www.bitbeyond.com" rel="nofollow noreferrer">http://www.bitbeyond.com</a>

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".

Markup should be added as needed, not because thats just the way you've seen it done.

blocks|key|1456974|text|div标签用于设置网页的样式，使其在视觉上对网站的用户或受众很有吸引力。在html中使用container-div将使网站看起来更专业、更有吸引力，因此更多的人会想要浏览你的页面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1456975|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1672089|text|井,|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1672090|容器div是非常好的工具，因为如果你想让站点居中，你不能仅仅使用body或者html...但是您可以使用div。为什么是容器？它通常被使用，只是因为代码本身必须是干净和可读的。这就是容器。它包含了所有的网站，以防你想把它弄乱:)|1672091|祝好运|1672092|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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 :)

Good luck

blocks|key|1672153|text|大多数浏览器默认采用网页大小。因此，有时页面不会在不同浏览器中显示相同的内容。因此，通过使用，用户可以针对特定HTML元素进行更改。例如，用户可以添加特定HTML标签的边距、大小、宽度、高度等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1672154|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

I have noticed a common technique is to place a generic container div in the root of the body tag:

<pre><code>&lt;html&gt;
 &lt;head&gt;
 ...
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="container"&gt;
 ...
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

Is there a valid reason for doing this? Why can't the css just reference the body tag?

Why should I use a container div in HTML?

容器

我注意到一种常见的技术是在body标签的根中放置一个通用的容器div：<html> <head> ... </head> <body> <div id="container"> ... </div> </body></html>这样做有合理的理由吗？为什么css不能直接引用body标记呢？

问为什么我要在HTML中使用容器div？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我要在HTML中使用容器div？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我要在HTML中使用容器div？
EN