html - 为什么 Twitter 的固定位置导航栏使用这么多 ？

Question

我正在尝试建立一个在页面顶部带有导航栏的网站。当我们滚动页面(如 facebook 或 twitter)时，它应该固定在浏览器的顶部，而不是随页面滚动(如谷歌搜索？？)。见图:似乎我们应该像这样设置导航栏的 css 属性 position

#nav_bar {
  postion:fixed;
}

但为什么所有这些网站都使用一大堆 div 来做到这一点？所有这些 div 有意义吗？喜欢推特:其中 topbar js-topbar 是最外面的 div 大小为 1583*40px，但我没有找到它的大小定义。然后它转到 global-nav->global-nav-inner->container，最后...container，它实际上包含导航项，如列表、搜索栏等等。奇怪的是它的大小是 865*0px。更多信息可以查看twitter主页的源码。我的问题是:但是为什么所有这些网站都使用一大堆 div 来做到这一点？所有这些 div 有意义吗？为什么一个高度为0px的div可以容纳那些导航项？

Answer 1

为什么是“许多”div？

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

<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>

• 保留单独的填充元素的原因是，您可以为定位器设置特定尺寸(即标题)，而不是在某些浏览器上搞乱该计算 (使用旧盒子模型) 通过添加填充。

• 保持对齐独立的原因是它会给你更大的灵 active ，你可以使用对齐技巧。

• 使用 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 世界之外的绝对位置的默认行为(没有其他定位或尺寸设置)，因为绝对位置元素从文档流中取出并且默认情况下不会计算与它的 child 有关的任何事情。

如果你想覆盖这个行为，你可以简单地使用 overflow:hidden; (只要高度没有被其他类或 JavaScript 专门设置为 0px) - 这将强制元素计算其子元素的尺寸并将它们包装起来。