你真的了解盒模型么

CSS盒子模型, 内容（CONTENT）就是盒子里装的东西; 而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料; 边框(BORDER)就是盒子本身了; 至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。 —— 百度知道

1.    <div class="wrapper z1"></div>
   
2.    <div class="wrapper z2"></div>
   

1.      width: 100px;
   
2.      height: 50px;
   
3.      padding: 10px;
   
4.      background-color: #dedede;
   

1. .z1{
   
2.      box-sizing: border-box;
   
3. }
   
4. .z2{
   
5.      box-sizing: content-box;
     }
   

1.       width: 100px;
   
2.       height: 50px;
   
3.       margin: 10px;
   
4.       background-color: #dedede;
   
5.    }
   

1. <div class="outer">
   
2.    <div class="inner"></div>
   
3. </div>
   

1.      width: 200px;
   
2.      height: 100px;
   
3.      margin: 10px;
   
4.      background-color: #dedede;
   

1.       width: 100px;
   
2.       height: 50px;
   
3.       margin: 10px;
   
4.       background-color: #bcbcbc;
   

• Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
  
• Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
  
• Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
  
• Margins of inline-block boxes do not collapse (not even with their in-flow children).
  
• The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
  
• The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
  
• The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
  
• A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.
  

• 浮动的盒模型不会margin折叠
  
• 创建BFC与子不折叠
  
• 设置定位的盒模型不会折叠
  
• 行内块级元素的盒模型不折叠
  
• 兄弟元素有间隙不折叠
  
• 父子盒模型元素, 孩子元素有border、padding、有浮动就不折叠
  
• height为auto、min-height为0的块级盒模型, 和它的最后一个没有border和padding的孩子盒模型底边距折叠, 且孩子的底部外边距和被清除浮动上边距有间隙不折叠。
  
• 如果min-height为0, 上下border、上下padding都为0, height为0或auto, 且没有行内盒模型, 他的孩子节点都会折叠
  

• 同为正值时, 取较大者为两者为间距
  
• 一正一负时, 正负相加为间距, 若结果为负值, 则两者部分重合
  
• 都为负值时, 两者重合, 且重合部分为绝对值大者
  

1.     <div class="wrapper z-01"></div>
   
2.     <div class="wrapper z-02"></div>
   

1.     .wrapper{
   
2.         width: 100px;
   
3.         height: 50px;
   
4.         background-color: #dedede;
   
5.     }
   
6.     .z-01{
   
7.         margin: -10px;
   
8.     }
   
9.     .z-02{
   
10.         margin: -15px;
    
11.     }