父子关系中，子元素margin-top会作用在父元素上面，如何解决？

 父子关系中，子元素margin-top会作用在父元素上面，如何解决？

解决方法：

1、给父元素添加1像素透明边框，{border-top：1px solid transparent;}

2、给父元素添加padding-top，此时父元素高度会被撑大，可以使用怪异盒子或者父元素高度减去padding-top值

3、给元素添加浮动,父子元素均可 {float:left;}

4、给元素添加定位，父子元素均可 {position:absolute;} 

5、给父元素添加    {overflow：hidden；}

外边距的特殊取值（兄弟关系中）：

1.元素水平排列，之间的外间距是相加和的关系

2.元素垂直上下排列，上下间距取最大值

如何区分标准盒子与怪异盒子？

      看box-sizing属性的取值: 

      怪异盒子为broder-box；标准盒子为content-box;

怪异盒子的触发条件：属性取值为box-sizing:border-box;