• 外边距
  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; }