CSS理解之margin

1.margin与百分比单位

Paste_Image.png

Paste_Image.png

2.margin重叠

margin重叠通常特性：

• 只发生在block水平元素（例如：p、div、list、item标签.....）
• 只发生在垂直方向（margin-top/margin-bottom）

margin重叠三种情况：

• 相邻的兄弟元素
• 父级和第一个/最后一个子元素
• 空的block元素（自己和自己重叠）

demo 1:
1.相邻兄弟元素margin重叠

  
  
  


  
第一行
  
第二行
  

兄弟元素的上下margin发生了重叠

2.父级和第一个/最后一个子元素

demo 1:

  
  
  


  

    

      我是子元素
    
  

Paste_Image.png

当我们为子元素设置margin后：



  
  
  


  

    

      我是子元素
    
  

Paste_Image.png

对最后的子元素设置的 margin-top：80px；等同于为父元素设置了 margin-top：80px；（父元素的margin-top=0，最后的子元素的margin-top=80px，发生了外边距重叠），也等同于他们两个同时设置 margin-top：80px；

Paste_Image.png

Paste_Image.png

inline元素（内联元素，像图片、文字这样的东西）
块状格式化上下文元素（BFC元素）

同样可以利用父子margin重叠条件来去除margin重叠：

demo 2：

为父元素添加`overflow:hidden;`，使其变为状格式化上下文元素（BFC元素）




  
  
  


  

    

      我是子元素
    
  

Paste_Image.png

demo 2 :

为父元素设置border-top：




  
  
  


  

    

      我是子元素
    
  

Paste_Image.png

demo 2:

为父元素和第一个子元素之间添加一个 （空格或文字、图片等内联元素）inline元素




  
  
  


  

     
    

      我是子元素
    
  

Paste_Image.png

去掉margin-bottom重叠与上面类似。

3.空的block元素margin重叠：

Paste_Image.png

空的block元素发生margin重叠，也需要一些条件限制：

Paste_Image.png

去掉空的block元素的margin重叠也是利用上面的条件：

Paste_Image.png

3.margin重叠的计算规则：

1、正正取大值：

Paste_Image.png

2、正负值相加：

Paste_Image.png

3、负负最负值（取绝对值大的）：

Paste_Image.png

3、理解CSS中的margin auto

首先理解margin atuo的作用机制 ，先看一些事实例子：

1.元素有时候，就算没有设置width或height，也会自动填充外部容器

例1:

image.png

图中是一个div元素，可以看到设置了背景色之后，它的宽度自动填满了它所在的容器。

例2：

image.png

我们设置左右定位值 left：0; right：0;，它的宽度同样自动填充填满了它所在的容器，只不过它的容器是它的第一个父级相对定位元素。

以上两个例子是比较常见的，没有设置宽高也会自动填充所在容器。

若刚才的两个例子，如果设置了width或heigth，自动填充特性就会被覆盖。

上图宽度从填满整个所在的容器到宽度500px，这就产生了剩余空间，图中的剩余空白部分空间 width=整个容器宽度-500px，而 margin auto 就是 为了填充这个空白的尺寸设计的，这就是 margin auto的作用。

image.png

image.png

总之一句话，auto就是用来分配。

通过以上的例子，很多事情就很好理解了，比方说：

1.为什么图片设置了margin：0 auto不水平居中？

image.png

如上图，设置了margin auto，图片为什么还是不居中呢？
因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足margin auto 用来填充剩余空间的条件，因为他根本就没有剩余空间。要想让它居中也很简单：

image.png

为图片设置 display:block属性，这时就算没有为图片设置宽度，它也会占满整个容器，这时候在设置 margin auto 它就会自动分配剩余空间。

2.为什么明明容器定高，子元素也定高了，margin auto 0 无法垂直居中?

image.png

上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？

因为他不满足占满整个容器这个条件，想一下，如果，没有为.son设置高度值，它之前满足占满整个容器这个条件吗？很显然不满足，也就没有剩余空间，所以设置height:100px margin auto不会垂直居中。

还需要注意一点：用margin:auto来实现居中，它计算后的值必须是正直，比如说你的父容器宽度1000px，子元素宽度2000px，这时设置margin：auto它是不居中的。

那么如何实现垂直方向上的剧中呢，方法很多不止一种：

1.writing-mode与垂直居中：

image.png

更改流为垂直居中之后，内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器，所以宽度的水平居中就失效了。

2.绝对定位元素实现垂直居中：

image.png

子元素设置了top:0;right:0;bottom:0;left:0;之后，没有设置宽高，absolute元素也自动填满了容器。

image.png

这时再设置宽高，自动填充就会被覆盖，如上图所示。这时上图蓝色旁边的空间尺寸就是被强制更改的尺寸，也就是 margin:auto可以用来分配的尺寸空间，此时在设置 margin:auto空间就被重新分配了，从而就实现了绝对定位元素的水平和垂直居中效果。但是这个特性只有IE8+以上的浏览器才支持。

image.png

4.CSS margin负值定位

1.margin负值下的两端对齐（主要利用了margin可以改变元素尺寸这一特性：正直变小，负值变大）

image.png

一个block水平元素，如果没有设置宽度值，我们通过设置margin可以改变它的尺寸：

  
  
  
  


  

    

      
列表1
      
列表2
      
列表3
    
  

由于

没有设置宽度，所以设置了margin-right:-20px;后，改变了它的宽度，增大了20px，变为1220px。这时我们再把li的宽度设置为计算好的386.66666px，就可以实现没有间隙的两端对齐。主要利用了margin负值增加它的空间。

image.png

image.png

5.CSS margin失效情形解析

1. inline水平元素的垂直margin无效，前提：

• inline水平元素是非替换元素，例如，不是元素；
• 正常书写模式，是正常的流（不是writing-mode这种重置它的书写模式）

demo：

    
    
    


    margin: 0px;

可以看出它的垂直方向是没有margin的，是无效的。

2.第二种常见的无效是margin重叠，比如你设置了margin-top当发现没有效果，这就是margin重叠带来的影响。

3.display:table-cell与margin

MDN：margin可以应用于任何元素，除了display为table的相关类型（不包括table-caption，table以及inline-table）。
换句话说，如果这个元素的display属性是table-cell/table-row等类似这样的表格相关的声明，它的margin是无效的。

demo:

    
    
    


    span.table-cell
    

       
div.table-cell
 
    
    

Paste_Image.png

可以看出设置的margin是无效的。

但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。

4.position：absolute与margin，绝对定位元素非定位方向的margin值“无效”，定位方向的margin值是有效的。