0

我正在尝试建立一个在页面顶部带有导航栏的网站。当我们滚动页面（如 facebook 或 twitter）时，它应该固定在浏览器顶部，但不能随页面滚动（如 google 搜索？？）。看图：在此处输入图像描述 好像我们应该设置这个导航栏的css属性位置，比如

#nav_bar {
  postion:fixed;
}

但是为什么所有这些网站都使用一大堆 div 来做到这一点？所有这些 div 是否有意义？Like twitter: 在此处输入图像描述 where topbar js-topbar是最外层的div，大小为 1583*40px，但我没有找到它的大小的定义。然后它转到 global-nav->global-nav-inner->container，最后...container，它实际上保存了导航项，如列表、搜索栏等。奇怪的是它的大小是 865*0px。更多信息，您可以查看twitter主页的来源。我的问题是：但是为什么所有这些网站都使用一大堆 div 来做到这一点？所有这些 div 是否有意义？为什么一个高度为 0px 的 div 可以容纳这些导航项？

4

2 回答 2

2

为什么有“许多” div？

一般的想法是，您拥有的包装元素越多，您在使用 css 进行样式设置方面所拥有的灵活性就越大。显然有一个限制，因为您还应该尝试保持标记的可读性和语义。我想说一个站点中的许多重要或隔离区域将受益于三个包装元素：

<div class="positioner">
  <div class="padder">
    <div class="alignment">
      Menu Here
    </div>
  </div>
</div>

显然，使用语义更多的 HTML5 元素，您可以使其更具可读性：

<header class="positioner">
  <div class="padding>
    <nav class="alignment">
      Menu Here
    </nav> 
  </div>
</header>

  • 为填充保留单独的元素的原因是，您可以为定位器（即标题）设置特定尺寸，并且不会通过添加填充在某些浏览器（使用旧框模型）上弄乱该计算。

  • 保持对齐分开的原因是因为它会给你更大的灵活性来使用你可以使用的对齐技巧。

  • 使用 header 元素的原因是因为此内容将充当 header imo。

您在上面给出的示例中，每个元素肯定都有其存在的理由，并且它们很可能都将用于实现设计师想要的 CSS 布局。有时，额外的包装 div 也用作可能是 AJAX 的内容的占位符，这在处理 Twitter 之类的内容时很可能发生。

当然，您可以只使用一个包装元素而侥幸，但是您将限制以后可以实现的样式和定位。

为什么高度为 0px？

在相对位置（而不是绝对位置）定位绝对层时经常使用一个技巧- 我相信这就是您看到这个的原因，但技巧本身并不是height:0px. 该技巧使用以下结构：

<div style="position: relative;">
  <div style="position: absolute;">
    The content here will float outside of the document flow, 
    but remain in the correct location within the document flow
     - in all viable browsers.
  </div>
</div>

如果您使用任何浏览器调试方法检查上述结构，您会注意到该position: absolute;层已折叠为没有高度（在现代浏览器中）。这是在旧 Internet Explorer 世界之外绝对位置的默认行为（没有其他定位或尺寸设置），因为绝对位置元素从文档流中取出，并且默认情况下不计算与它的子元素有关的任何内容.

如果您希望覆盖此行为，您可以简单地使用overflow:hidden; （只要高度没有被其他类或 JavaScript 专门设置为 0px） ——这将强制元素计算其子元素的尺寸并包装它们。

于 2012-11-02T10:41:12.087 回答
1

首先使用位置：绝对；如果您不希望它在滚动时随您移动。位置：固定；如果你这样做。

其次，当你建立一个网站时，你要做的第一件事就是决定你的网站的结构是什么样的。所以顶部的菜单将是

<div id="Menu"> </div>

现在你可能想在它下面创建一个标题

<div id="Header"> </div>

在此之下，您想共享内容，因为这就是网站所做的。

<div id="Content"> </div>

在此之下，您可能需要一个页脚，上面写着 2012 版权所有等。

<div id="Footer">2012 Copyright zoujyjs &copy; </div>

现在您可能想要将所有内容居中。为什么不把所有这些以前的 div 放在一个包装器 div 中。然后我们要做的就是将包装器 div 居中。

<div id="Wrapper">
      <div id="Menu"> </div>
      <div id="Header"> </div>
      <div id="Content"> </div>
      <div id="Footer"> </div>
</div>

您还可以在标题中添加徽标等内容。

我想你应该已经明白了。但是那不是很明显你会得到“欺骗”吗？

另外：当没有在 div 上指定高度时，div 将自动调整其内容的大小。

<div style="background-color:black;">
   <!-- Nothing will be seen on your page, because the div is 0 height, 0 width by                default -->
</div>


<div style="background-color:black;">
   Height of the div will now be the same height as the height of this line. (15 px by    default I believe
</div>
于 2012-11-02T10:16:26.347 回答