1. 父子元素margin塌陷**
给子元素设置margin后,初衷是让子元素在父元素中有一定的margin。运行结果发现,子元素和父元素的margin合并在了一起,子元素的margin直接传递给父元素,margin变成了父元素相对于当前窗口的margin,而不是子元素相对于父元素的margin。
margin塌陷的解决方法
(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border:1px solid transparent)。
(2)为父盒子添加overflow:hidden;
(3)为父盒子设定padding值;
(4)为父盒子添加position:fixed;
(5)为父盒子添加 display:table;
(6)利用伪元素给子元素的前面添加一个空元素
给子元素son添加一个兄弟元素属性为content:" ";overflow: hidden;