关于前端:深入理解CSS盒模型中的margin

• 外边距

1. 设置外边距会在元素外创立额定的“空白”，“空白”通常指不能放其余元素的区域，而且在这个区域能够看到父元素的背景，外边距不会影响盒子的大小，但会影响盒子的地位

margin 会影响到盒子理论占用文档流的空间

1. 外边距与行内元素：对于行内非替换元素，高低外边距不受影响，行高也不受影响。行内替换元素则行高会有变动。负外边距是使行内替换元素挤入其它行的惟一方法
2. 负外边距
3. 四个方向的外边距解析

❤ margin-top：设置正值，本身元素会向下挪动，负值反之

❤ margin-left: 设置正值，本身元素会向右挪动，负值反之

❤ margin-bottom: 设置正值，下边的元素会向下挪动，负值反之

❤ margin-right: 默认状况下不会产生任何成果，左边有元素成果和 margin-bottom 相似

元素在页面中是依照自左向右的顺序排列的

1. 深刻了解 margin 重叠

★属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠

★垂直外边距的重叠 - 相邻的垂直方向外边距会产生重叠景象

1)兄弟元素（对开发无利，不须要解决）

二者都是正值时：兄弟元素的相邻垂直外边距会取两者之间的较大值

一正一负时：取二者的和

都是负值：取二者绝对值较大的

2)父子元素（必须解决）

子元素会传递给外边距
解决方案一：开启 BFC

   \*{margin: 0; padding:0;}
   #up,#down{ width:200px;
   height:200px; 
   background: #FFC0CB; margin:50px; } 

   \*{margin: 0; padding:0;} #wrap{width: 300px; height: 300px; background: #FF1493; margin: 50px;} #down{width: 150px; height: 150px; background: #FFC0CB; margin:50px;}

解决方案二：利用 clearfix 类

    Document .box1{width: 300px; height: 300px; background-color: #008000;}
    .box2{width: 100px; height: 100px; background-color:deepskyblue; margin-top:200px ;} /\* 
    .box1::before{content: ''; display: table;}
    .clearfix::before{content:'' ; display: table;}