为什么我要在HTML中使用容器div?

时间:2008-12-10 00:34:27

标签: html css

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

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

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

9 个答案:

答案 0 :(得分:60)

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

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

对其进行居中

另外,内容,例如版权声明,可以放在容器div的外面,但它不能放在身体的外面,允许在边框外面的内容。

答案 1 :(得分:10)

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

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

答案 2 :(得分:2)

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

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

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

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

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

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

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

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

恐怖。

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

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

http://www.bitbeyond.com

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

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

答案 3 :(得分:1)

某些浏览器(&lt; cough&gt; Internet Explorer)不支持正文上的某些属性,尤其是widthmax-width

答案 4 :(得分:1)

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

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

这是我使用的css:

html {
  text-align:center;
}

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

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

希望这对任何人都有用。

答案 5 :(得分:1)

我最常见的原因是:

  1. 布局可以有一个固定的宽度(是的,我知道,我为喜欢固定宽度的设计师做了很多工作),
  2. 因此,可以通过将text-align:center应用于正文然后将margin:auto设置为容器div的左侧和右侧来居中布局。

答案 6 :(得分:0)

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

答案 7 :(得分:0)

那么,

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

祝你好运

答案 8 :(得分:-2)

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