Question

CSS中margin的问题.

有一对父子盒子div,为什么给子盒子设置margin,父子盒子一起移动,而给父盒子加上边框border后,给子盒子用margin的话,就是子盒子相对于父盒子移动呢?

Answer 1

这个是边距合并问题导致的，除了给父元素设置border之外，给父元素设置padding-top值和padding-bottom值或者设置overflow:hidden等都可以解决边距合并的问题，这样父级元素就不会跟着动了，基本原理要学好啊

追问

谢谢～!

Answer 2

CSS 相对定位
例如：
#box_relative {
position: relative;
left: 30px;
top: 20px;
}

Answer 3

盒子的塌陷造成的；
建议查一下相关资料自行学习一下，方便记忆；

Answer 4

当元素绝对定位以后，它在父元素的位置是根据top/left/right/bottom来定位的，而margin是根据自身当前位置来定位的
第一个，它距离父元素left:50%,top:50%，那就是父元素一半的距离，因为要实现居中即自身的中点在父元素的中间才算，所以margin-left/margin-top 负的自身宽/高的一半，那么正好水平垂直居中。
第二个，元素在绝对定位以后,left/rigth和top/bottom是没有优先等级的，不像margin-left作用的时候margin-right没用，那么现在left:0,right:0,两方实力相当，浏览器没办法，都得满足，那就水平居中吧，而绝对定位元素默认top是0.现在margin:20px，那就是把自己往下移动20px。严格来说移动25px才真正的垂直居中

追问

感觉和我问得不是同一个东西(●°u°●)​ 」

感觉和我问得不是同一个东西(●°u°●)​ 」