*学习笔记
1.margin叠加问题
出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。
如：<style>
#div1{width: 100px;height: 100px; background:brown;margin-bottom:30px}
#div2{width: 100px;height: 100px;background:seagreen; margin-top:30px}
</style>
<div id="div1"></div>
<div id="div2"></div>
</body>
这里只会显示一个30px的距离，上下的margin进行了重叠。
2.margin传递问题
出现在嵌套的结构中，且只是针对margin-top的问题。
如：<style>
#box1{ width: 200px;height: 200px;background:brown;}
#box2{ width: 100px;height: 100px;background:seagreen;margin-top: 100px; }
</style>
<div id="box1">
<div id="box2"></div>
</div>
这里两个div都会向下100px,并不会只是box2向下。
解决方案：
1.BFC规范
2.给父容器加边框
#box1{ width: 200px;height: 200px;background:brown;border:1px solid black}
这样虽然能解决问题，但不能适应所有场景，如果我这个div不需要加边框，就不能用了。
3.margin换成padding
给父元素加padding
#box1{ width: 200px;height: 100px;background:brown;padding:100px}
父元素加了padding高度就变了，所以height也要改。
