为什么有“许多” 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) ——这将强制元素计算其子元素的尺寸并包装它们。