重新认识web前端-margin叠加问题

前提

普通文档流内的块元素

元素并列

【垂直】方向上相遇的margin值会发生叠加

                正值：
                    两值相等，取当前
                    两者不同，取较大
                负值：
                    两值相等，取当前
                    两者不同，取绝对值较大
            
            一正一负：相加（正常）

	//css
     div{width: 100px;height: 100px;}
    .box1{background: red;margin-bottom: 100px;}
    .box2{background: green;margin-top: -50px;}
	//html
     <div class="box1"></div>
     <div class="box2"></div>

元素嵌套

父元素没有padding,border时，
子元素【垂直】方向的margin值会叠加给了父元素

 <style>
      
        .box1{width: 300px;background: red;
              /* border:1px solid #000; */
             /* padding:10px; */
             /* padding:50px 0; */
             overflow: auto;
        }
        .box2{width: 100px;height: 100px;background: green;
             margin:50px;
        }
    
    </style>

 <div class="box1">
     <div class="box2"></div>
 </div>

解决方案

1)转换思路，使用padding替代
2)父元素{overflow: hidden;/auto/scroll}