小Tip：margin负值详解

MARGIN

先看看 margin

margin： CSS外补白，外边距，是从自身边框到另一个容器边框之间的距离。

四个方向：

• 上边距：margin-top
• 下边距：margin-bottom
• 左边距：margin-left
• 右边距：margin-right

简写：

• margin:10px 20px 30px 40px;

  • 上边距为10px
  • 右边距为20px
  • 下边距为30px
  • 左边距为40px

• margin:10px 20px 30px;

  • 上边距为10px
  • 右左边距都为20px
  • 下边距为30px

• margin:10px 20px;

  • 上下边距都为10px
  • 右左边距都为20px

• margin:10px;

  • 上右下左边距都为10px

margin负边距

margin为 正值 时，元素在 文档中所占位置 是从border之外向四周 扩展 的，而为 负值 时，则是向内 收缩 的(图2)。

1. 正值的时候，元素所占的位置向周围扩散了20px

   

   图1

2. 这是负值，可以看到，第二个元素实际 所占的位置 已经少了20px，反映在页面就是，元素2向左偏移了20px

   

   图2

3. 当偏移大于自身宽度的时候，自身将不再 占有位置 ，后续的元素会无视他（就当没有你这个兄弟！）（图3左负值，图4右负值）

   

   图3
   
   
   

   图4

4. 但是，当元素没有固定宽度的时候（或者 width:auto;），负值会增加自身宽度！看图，两边露出来了！这是要逆天啊，有木有！

   

   图5

5. 仔细看就会发现，margin只是对元素在 文档中所占的位置 产生影响，正值扩大，负值缩小，记住这点，咱们就可以做很多有意思的东西。

实例

• 经典的利用绝对定位来垂直水平居中，如图6：
  给元素绝对定位，left、top分别为50%；然后margin-top为 负的高度的一半、margin-left为 负的宽度的一半。

  

  图6

---

• 列表布局有边框，如图7：

  

  图7

  这样可以直接上左都为-1px，然后相对定位，z-index:0 ， 父级padding上左为1px。

  也可以右下都为-1px，相对定位，z-index:0，父级只需padding-bottom为1px

  
  
      
  
          
  
              
  1
              
  2
              
  3
              
  4
              
  5
              
  6
              
  7
              
  8
              
  9
              
  10
              
  11
              
  12
          
      
  
  

---

• 还是列表，有间距的列表，如图8：

图8

 这个利用负值介绍中的第四条（当元素没有固定宽度的时候（或者 **width:auto;**），负值会增加自身宽度），会特别简单，看代码

    
    
      

          

              
1
              
2
              
3
              
4
              
5
              
6
              
7
              
8
              
9
              
10
              
11
              
12
          
      
    

---

• 右边固定，左边自适应布局，如图9：

  

  图9

  给左边盒子加个父级，宽100%、左浮动，左边黑字margin-right： 右边盒子的宽；右边盒子固定宽、左浮动，margin-left：负的本身宽度。

  这样当外层的宽度变换的时候，左边的盒子会跟随变化，具体看代码：

  
  
    
  
        
  
            
  内容 ... 内容
        
        
  头像
    
  
  

---

• 还有经典的等高列布局，如图10：

  

  图10

  还记得前面讲的 margin只是对元素在 文档中所占的位置 产生影响 吗？

  如果给margin-bottom负值，那么他所占的位置会往上收缩，利用这个特性，我们可以做等高列布局，看代码：

  
  
    
  
        
  
            
  左侧内容
            
  左侧内容
            
  左侧内容
            
  左侧内容
            
  左侧内容
            
  左侧内容
        
        
  
            
  中间内容
        
        
  
            
  右侧内容
        
    
  
  

---

先这么多，待续...

有不明白的可以留言☺