logo标签列表

包裹主体的div是否真的有必要？

htmlcss
3

一种流行的构建固定居中布局的技术是将body中的所有内容包装在一个div中，并对其设置一些CSS规则，例如：

<body>
    <div id="wrap">
        all content here
    </div>
</body>

#wrap { width: 850px; margin: 0 auto; }

我在想，是否有添加这个额外的包装div的原因，因为在上设置相同的CSS规则也可以起作用。这是为了兼容某些浏览器还是只是传统？
当将其设置在body上时，它适用于哪个浏览器？ - PeeHaa
1
@PeeHaa，我测试了一大堆浏览器，包括IE6、IE7、IE8、Chrome 15、Opera 11.60、Firefox 4和Firefox 8。 - stivlo
确实，你似乎是对的。虽然边距的工作方式并不像你期望的那样。也就是说，它似乎更像填充，因为背景不适用于它并占据了整个宽度。我之前并不知道这一点。 - PeeHaa
@PeeHaa 我相信会有一些陷阱，万一我遇到了奇怪的行为，我会尝试添加包装来解决。 - stivlo
你看过我在Robs' answer评论中的fiddle了吗？我认为这个问题没有解决的办法，除非你想给所有（内部）元素一个背景。 - PeeHaa
@PeeHaa 现在看到了，谢谢。有趣...所以它不像其他 div 一样工作...所以想要给内部设置背景颜色的话就需要额外的包装。 - stivlo
4个回答
5
不需要像许多人一样使用“wrapper”div，因为你看到别人这样做了。应该使用body代替。在过去，在body上设置CSS属性是一个问题，但现在不再是问题了。
1
+1；从经验来看，你是正确的，但我很想看到一些关于浏览器支持的来源。 - You
1
请记住，您可以更进一步，将 body，div#wrap 转换为 html，body。也就是说，您放在 body 中的任何内容都会放到 html 中，而 div#wrap 中的任何内容都会放到 body 中。 - BoltClock
1
@Rob：如果我没记错的话，主要是width/height和padding/margin问题。而对于最底部的元素来说，这些属性并不是很相关。 - You
@You - 啊！是的。Kroc的文章，第二篇，就是我记得的那篇。 - Rob
@Rob 你仍然需要一个包装器。如果你看一下这个例子，你会发现整个背景都是红色的。所以它没有使用（实际上是有用的，但是不同的）边距（你所期望的）。在Chrome中测试过。 - PeeHaa
显示剩余4条评论
1

它可能在某些浏览器中有效，但我认为它不会在所有浏览器中都有效。此外，在body上设置背景，然后在wrap上设置单独的背景是非常常见的。

0
如果您需要整个页面的特定背景和居中容器，则无法做其他选择。它还提供了一种使用“图层”的方法，例如需要模糊整个#wrap内容的灯箱。
0
添加额外的包装器可以使 body 和 div 独立更改。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接