Html 为什么div id="；“包装”；当我们给内部div class=''；标题“；

当我们给内部div class=“header”加上页眉时，为什么div

id=“wrap”

会移动？请解释一下为什么div会移动

*{
保证金：0；
填充：0；
}
#包裹{
高度：200px；
背景：#000；
}
.标题{
高度：200px；
宽度：200px；
边缘顶部：20px；
背景：#F00；
}

D

在包装器上使用

溢出：自动

或

溢出：隐藏

。这将从根本上防止保证金崩溃

*{
保证金：0；
填充：0；
}
#包裹{
高度：200px；
背景：#000；
溢出：自动；
}
.标题{
高度：200px；
宽度：200px；
边缘顶部：20px；
背景：#F00；
}

D

div会移动，因为子级的边距是相对定位的

如果您不希望向下按

#wrap

div，请将其位置设置为绝对。请尝试下面的代码片段

*{
保证金：0；
填充：0；
}
#包裹{
高度：200px；
背景：#000；
位置：绝对位置；
}
.标题{
高度：200px；
宽度：200px；
边缘顶部：20px；
背景：#F00；
}

D

*{
保证金：0；
填充：0；
}
#包裹{
高度：200px；
背景：#000；
}
.标题{
高度：200px；
宽度：200px；
边缘顶部：20px；
背景：#F00；
}

D