构建固定居中布局的一种流行技术是将 body 中的所有内容包装在 div 中,并在其上设置一些 CSS 规则,例如:
<body>
<div id="wrap">
all content here
</div>
</body>
#wrap { width: 850px; margin: 0 auto; }
我想知道是否有理由添加这个额外的包装 div,因为在
body
上设置相同的 CSS 规则是有效的。是为了兼容某些浏览器还是只是一个传统?
不。您不需要那么多人使用的“包装器”div,因为他们看到其他人这样做。按照你应该的方式使用身体。在 body 上设置 CSS 属性过去是一个问题,但现在不再是问题了。
它可能适用于某些浏览器,但我认为它不适用于所有浏览器。另外,在正文上设置背景,然后在包装上设置单独的背景是很常见的。
如果您需要整个页面的特定背景和居中的容器,则别无选择。它还提供了一种使用“图层”的方法,例如需要模糊整个
#wrap
内容的灯箱。
添加额外的包装器可以使 body 和 div 独立更改。
使用 body 元素作为页面包装,但如果 body 还包含网格会导致错误
当 body 同时是具有一定宽度的包装纸并且还包含网格时,我注意到以下情况。例如,你给身体一个网格,那么这个网格就从身体的右侧出来,但只有一个非常窄的屏幕窗口。这就是使用另一个 div 作为附加包装器的原因。所以给body 100vw 宽度,然后给wrapper 相应的网格。我的说法正确吗?我想在这里讨论一下这个问题。也可以用德语