如何在 HTML5 中将 DIV 标签图像放置在页面的最顶部?
我试图通过在 CSS 中使用背景图像来放置图像的 x 重复“网格”,然后在 DIV 标记中使用 id。我的意图是放置一种“面板”,然后始终延伸到页面的最顶部,并使用repeat-x循环。它在没有 DOCTYPE 的情况下工作得很好,但是当我将 clean 放入代码中时,它会将标签中的图像向下推,就好像页面顶部有大约 15 px 左右的边距。我尝试了上边距、z-index,但没有成功。
如果我问了一个愚蠢的问题,请原谅,但我是个新人。
谢谢, -雅各布
I'm trying to put an x-repeat "grid" of images by using background-image in CSS, then using the id in a DIV tag. My intention is to put a sort of "panel", then always extends to the very top of the page, and loops with repeat-x. It works just fine without a DOCTYPE, but when I put the clean in the code, it pushes the image in the tag downwards, as if there's a margin on the top of the page of about 15 px or so. I tried top-margin, z-index, with no success.
Excuse me if I'm asking a silly question, but I'm sort of new.
Thanks,
-Jacob
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
从您的描述中不清楚您使用哪种方法将面板放置在页面顶部,但在我看来,您的面板 div 放置在 HTML 代码中的 body 元素的最顶部,如下所示
:如果是这种情况,您可能会受到浏览器中正文和/或 html 元素的边距和/或填充的默认设置的影响(以及它们在浏览器模式之间的差异 - 即有或没有 doctype -在某些浏览器中)。
这些的默认设置因浏览器而异 - 解决该问题的常见方法是重置它们 - 例如:
如果这对您没有帮助,请提供更多详细信息(即代码或指向受影响的页面)
It's a bit unclear from your description exactly which method you use for putting your panel at the top of your page, but it seems to me that your panel div is placed at the very top of the body element in yoor HTML code like this:
and if that is the case, you're probably suffering from the default settings for margin and/or padding for the body and/or html elements in your browser (and how they might differ between browser modes - ie. with or without the doctype - in some browsers).
The default settings for these vary between browsers - and a common way to work around that problem is to reset them - for example like this:
If this doesn't help you, please supply some more details (ie. code or a link to the affected page)
所有现代网页都需要文档类型。这听起来就像你在与盒子模型作斗争,而你没有盒子模型。如果没有文档类型,你就会处于怪癖模式,一切都会变得混乱。
A doctype is required of all modern web pages. This sounds like you are fighting the box model when you don't have one. Without a doctype, you are in quirks mode, and all hell breaks loose.
如果浏览器在标准模式下运行(这是您想要的,并且由良好的文档类型触发),则
元素上有一些边距或填充。使用 body { margin:0;填充:0; } 将其清除并让您的元素填满整个屏幕。
If a browser is operating in standards-mode (which you want, and which is triggered by having a good doctype), then the
<body>
element has some margin or padding on it. Usebody { margin:0; padding:0; }
to clear it out and have your elements fill the entire screen.