当使用margin时，会出现两个问题：
问题1、父子间的margin，会由子级传递到父级
问题2、兄弟间margin，会上下叠加
做一个简单的实验:
| Html |
Css |
|
|
|
| 效果
|
|
普通解决方法：
问题1、父子间的margin，会由子级传递到父级
解决方法: margin传递的产生的原因是父级的高度没有被自动撑开，所以在父级父级增加属性： overflow: auto 即可解决
问题2、兄弟间margin，会上下叠加
解决方法：浏览器为了保证列表的整齐，上下margin产生了叠加，不能直接解决。只能通过减少一个margin的方式。如只定义margin-top:100px; margin-bottom:0px。的方式解决。
不是很完美。
经过实验，发现flex弹性魔盒可以完美解决问题。代码如下：
| Html |
Css |
|
|
|
| 效果
|
|
