给子盒子设置margin-top时，会作用于父盒子的解决办法

如何将子盒子垂直居中于父盒子？新手可能会想到使用margin，

但是子盒子设置margin-top后简如，会作用于父盒子，如图1

造成这个现象的原因是：

1.当一个元素包含在另一个元素中拦启启时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加。

2.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

解决办法如下？

方法一：为父元素设置border

方法二：为父元素添加overflow：hidden；样式

方法三：为父元素或者子元素声明浮旁宏动

方法四：为父元素或者子元素声明绝对定位

做项目的时候在最大的div里嵌套了一个小的div，给小的div设置margin的时候，大盒子一伏此起掉下来，然后百度找问题，找到了

给子元素盒子增加垂直外边距margin-top时，会导致父元素盒子与子元素盒子边界重叠而导致父元素盒子也往下走前厅者

解决办法：

1、修改父元素的高度，也就是时设置父元素盒子的内边距，增加padding-top样式 模拟 （padding-top：1px；常用）

2、为父元素添加边框线border（border:1px solid transparent可用）

3、慧薯为父元素添加溢出隐藏属性 overflow ：hidden；样式即可（完美）

4、为父元素或者子元素声明浮动（float：left；可用）

5、为父元素或者子元素声明绝对定位（position:absolute）

给子盒子设置相同宽差戚蚂度高度大小，并设置子盒子背景颜色，父盒子设置边框。在谷歌和IE浏览器上显示父盒子和子盒子之间有缝隙。

网上说给父盒子加上box-sizing: border-box

当父盒子边框1像素时，可以正常展示

还有就是当某

但是当父盒子边框2像素或3像虚埋素或其他一些像素时，还是会有缝隙出现

边框的大小、盒子的宽高某些值组合在一起就不会出现缝隙。找仔轿不出原因。

目前解决方法就是在子盒子设置边框

---