html - <div> 初学者问题

Question

我正在制作一个网站，标题位于页面顶部的 div 框中。问题是，当我将标题放入框中时，它不会留在框中

<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
 Welcome To A Website
 </h1>
 </div>

Answer 1

当您创建一个 HTML 文件时，每个浏览器都会解释其中的元素。例如:某些浏览器在 <p> 处有一个额外的边距配置或一些不同的行高属性。因此，开发人员通常会使用 Reset CSS(例如:http://meyerweb.com/eric/tools/css/reset/)。它减少了浏览器在默认行高、边距和标题字体大小等方面的不一致。

在你的例子中，h1默认情况下有一些配置可以使它脱离 div框(边距和填充，正如我检查的那样)。您可以使用以下方法解决它: margin: 0;填充:0；在 <h1>元素。我对 future 元素的建议:使用 Reset CSS，这样您就可以更好地控制此类事情。

另一个建议:使用 CSS 文件来组织您自己的样式。当您要修改一个常见的东西并且必须逐个文件地进行修改时，内联样式不是一件好事。使用 CSS，您只需更改文件，它会反射(reflect)在使用它的所有 HTML 中。

好吧，我的 CSS 修复建议是:

HTML:

<div>
    <h1>Welcome to a Website </h1>
</div>

CSS:

div {
    /* Make title go to entire screen*/
    width: 100%;
    display: block;

    /* You visual config */
    height:40px;
    background:grey;
    border:3px solid;
    border-radius:10px;
    opacity:0.85;
    overflow:hidden;
    line-height:40px;
}

div h1 {
    margin: 0;
    padding: 0;
    text-align:center;
}

我使用 width:100%;display:block 而不是 width:1000px 因为我假设你想要一个占据屏幕 100% 宽度的 block 。工作演示:http://jsfiddle.net/brunoluiz/NyLAD/

好吧，祝 HTML 和 CSS 学习顺利!