嵌套子元素何时展开其父元素？

Question

在许多地方，我把elmeents嵌套在其他元素中。我不能推断出子元素何时导致父元素扩展。我没有任何代码要发布，因为这是一个一般的概念性问题，所以我可以根据需要进行设计。

Answer 1

您应该了解的第一件事是CSS Box Model。这将有助于您了解元素的属性如何使其具有它具有的大小和尺寸。另一个好资源是here。

以最简单的方式回答您的主要问题（并且非常笼统）：

• 块级元素占用尽可能宽的宽度（遵守CSS宽度规则）。它们的高度取决于它们的内容和CSS高度属性。
  • div，p和ul等元素都是阻止的。
  • 这些通常会导致您的父元素展开。
• 内联级别元素将继续在一条线中一起流动，只根据需要填充宽度和高度。
  • span，em，strong等元素都是内嵌的。
  • 这些将导致您的父元素只有在同一行上有足够的元素才能保证另一条线时才会展开。

有许多方法可以使用CSS调整元素的显示。

Answer 2

获取firefox的firebug。您可以浏览DOM（页面的HTML结构），它将根据“浏览器的眼睛”看到它们（以及它们在美学上的外观）来突出显示元素。

一些一般的经验法则：

• 只要孩子没有漂浮或绝对定位，孩子就会扩大父母的身高，但......
• 您可以“清除”一系列浮动图像http://www.quirksmode.org/css/clearing.html以使父元素展开
• 如果对相对定位的子元素使用顶部定位，浏览器仍会在完全相同的位置看到该元素。换句话说，无论孩子相对位于何处，父元素的高度都将保持不变。
• 在显示的子项上使用正边距或负边距：块将从其父级添加或减去高度