Question

新手提问，请看一下这个例子：http://codepen.io/cguo/pen/mVNgvG

h1元素的margin-top为60px。即使h1元素位于container div内，margin-top也不是相对于container而是设置在页面顶部。

要实现我的目标，我必须将h1的{{1}}更改为margin-top。

为什么没有相对于父母的保证金？这是保证金的标准行为吗？

Answer 1

默认情况下，块级元素的边距超出其容器的范围。为了确保它们保持在内部，您需要使容器成为块格式化上下文根。

有几种方法可以做到这一点。一种是给容器一个overflow：hidden

的属性

.container
  //existing code
  overflow: hidden

这是一个令人兴奋的主题，而且太复杂，无法在此解释，但如果您对元素行为方式的机制感兴趣，我建议您了解视觉格式化模型和块格式化上下文特别是（对于初学者）。