Question

我已将元素的宽度设置为100％，但边框不会一直到页面的边缘，它可能会在每一行留下两个像素的间隙。

这是我的HTML：

<body>
    <div class="headerContainer">
    </div>
</body>

这是我的CSS：

.headerContainer{
    border-bottom:black 2px solid;
    height:40px;
    width:100%;
    color:blue;
}

另外，另一个问题。我在浏览网站时遇到了这段代码：

<div class="navbar-wrapper">
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
        <h1 class="brand"><a href="#top">Legend!</a></h1>
        <nav class="pull-right nav-collapse collapse">
          <ul id="menu-main" class="nav">
            <li><a title="portfolio" href="#products">Out Products</a></li>
            <li><a title="services" href="#services">Services</a></li>
            <li><a title="news" href="#news">News</a></li>
            <li><a title="team" href="#team">Team</a></li>
            <li><a title="contact" href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
      <!-- /.container -->
    </div>
    <!-- /.navbar-inner -->
  </div>
  <!-- /.navbar -->
    </div>

我想不出有任何理由拥有那么多div标签，不是一个 - 或者可能是两个 - 做得好吗？

第三个问题：如果我在div标记中有div标记，我将如何在CSS中引用它？

Answer 1

body元素有一个默认边距。加上这个：

body {
    margin:0;
}

你的空间就消失了。

<强> jsFiddle example

你的第二个问题没有真正的答案。结构可能取决于很多事情。

最后，使用CSS引用div中的div使用div div {...}来定位父div的任何后代div，或div > div {...}专门定位另一个div的子div。

Answer 2

1）加入CSS Reset。边缘上的几个空格像素很可能是由于html，body或包装元素上的某种填充或边距。 html, body { margin: 0; padding: 0; }也可能会修复它。

2）您粘贴的代码中可能不需要那么多嵌套的div标签，但是如果不知道功能就很难说（可能涉及很多javascript）导航如何工作）。即便如此，该代码可能会得到显着改善/简化。

3）您可以使用CSS选择器div引用div内的div div { }标记，该标记会选择居住在至少另一个div内的所有div标记{{ 1}}标签。相比之下，div > div { }只会选择直接嵌套在另一个div内作为直接子项的div个标记。

Answer 3

尝试在css顶部添加此行：

*{
    padding: 0;
    margin: 0;
    outline: 0;
}

Answer 4

将body {margin: 0;}添加到您的CSS中。默认情况下，Body有一个边距，您需要将其删除。添加padding: 0;或outline: 0;（如另一个答案所示）不是必要的。
有时，您需要在HTML代码中使用额外的容器才能将CSS应用于内容的各个部分。例如，当您希望页面底部的粘性页脚与页面的其他部分CSS规则分开时。
不完全确定您的问题是什么意思，但您可以通过多种方式选择元素的子元素。如果没有举例，您可以为直系孩子尝试parentelement > childelement。

Answer 5

2）你的例子中的大量DIV可能来自Twitter Bootstrap。我声称通过使用许多div和许多独立的CSS类，Bootstrap成为一个灵活的 CSS框架。适用于不同的布局，适用于快速模型。

你绝对可以删除很多div并组合许多css类，然后你制作了一个定制的 html / css解决方案，适合你的 meny ...和menues非常类似于你的。

宽度：100％不是100％

5 个答案: