深入理解margin属性

百分比margin的计算规则

• 普通元素的百分比margin都是相对于容器的宽度计算的

<div style="width:600px;height:200px;">
    <img src="1.jpg" style="margin:10%">
</div>

计算之后水平方向的margin和垂直方向的margin都是60px

• 绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的

<div style="width:600px;height:200px;">
    <img src="1.jpg" style="margin:10%;position:absolute">
</div>

计算之后水平方向的margin和垂直方向的margin都是102.4px，因为是根据第一个定位祖先元素计算的

css的margin重叠

margin重叠通常特性

• block水平元素，不包括float和absolute元素
• 不考虑writing-mode，只发生在垂直方向（margin-top和margin-bottom）

margin重叠的3种情况

1. 相邻的兄弟元素

     p{
        line-height: 2em;
        margin:1em 0;
        background: #ccc;
     }

     <p>第一行</p>
     <p>第二行</p>

第一行的margin-bottom和第二行的margin-top重叠，因此两个行之间只有1em的距离，并不是2em

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

.father{
    background: #ccc;
 }

<div class="father">
    <div class="son" style="margin-top: 80px;">我是son</div>
</div>

在子元素上添加margin-top:80px，并没有将父元素撑开，从效果图看，相当于直接在父元素上添加margin-top:80px,也相当于在子元素和父元素上都添加margin-top:80px,而这两个产生了重叠

父子margin重叠其他条件

margin-top重叠

• 父元素非块状格式化上下文元素（overflow:hidden）
• 父元素没有border-top设置
• 父元素没有padding-top值
• 父元素和第一个子元素之间没有inline元素分（ ）

margin-bottom重叠

• 父元素非块状格式化上下文元素
• 父元素没有border-bottom设置
• 父元素没有padding-bottom设置
• 父元素和最后一个子元素之间没有inline元素分隔
• 父元素没有min-height、height、max-height限制

3. 空的block元素

.father{
    background: #ccc;
    overflow:hidden;
 }
 .son{
    margin:1em 0;
}

<div class="father">
    <div class="son" ></div>
</div>

空block元素只有图中的高度，从margin:1em 0;看子元素应该有上下外边距加起来2em，但是实际只有1em。

空block 元素margin重叠其他条件

• 元素没有border设置
• 元素没有padding设置
• 里面没有inline元素
• 没有height，或者min-height

margin重叠计算规则
1、正正取大值
2、正负值相加
3、负负最负值
相邻重叠绝对值最大的负值
父子重叠绝对值最大的负值自身重叠

css的margin:auto

元素如果没有设置width或height，会自动填充容器。
如果设置了width或height，自动填充就会被覆盖，此时的margin值是0px。
原本应该填充的尺寸被 width、height强制变更，而margin:auto就是为了填充这个变更的尺寸设计的。

div{
    width:100px;
    margin:0 auto;/*左右均auto，居中显示*/
}

图片为何不居中？??

img{
    width:200px;
    margin:0 auto;
}

因为此时图片是inline水平，就算没有width，也不会占据整个容器。

img{
    display：block;
    width:200px;
    margin:0 auto;
}

此时图片是block水平，就算没有width，也会占据整个容器（不能一行显示）

无法垂直居中？??

.father{
    height:200px;
    background:#ccc;
}
.son{
    height:100px;
    width:500px;
    background:#c00;
    margin:auto
}

水平方向能居中，但垂直方向无法居中。
假设.son没有设置高度height:100px，高度会自动200px高吗？—NO

writing-mode与垂直居中

.father{
    height:200px;
    width:100%;
    background:#ccc;
    writing-mode:vertical-lr;
}
.son{
    height:100px;
    width:500px;
    background:#c00;
    margin:auto
}

writing-mode会把文档流改为垂直方向，所以可以实现垂直居中，但是水平居中会失效。

绝对定位元素的margin:auto居中

.father{
    height:200px;
    background:#ccc;
    position:relative;
}
.son{
    position:absolute;/*没有width、height，absolute元素自动填满容器*/
    top:0;
    right:0;
    bottom:0;
    left:0
}
//给绝对定位元素设置width，height，会限制absolute元素自动填满容器
.son{
    position:absolute;
    width:500px;
    height:100px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;/* 此方法只适用于IE8+*/
}

css margin负值定位

• margin负值下的两端对齐–margin改变元素尺寸
• margin负值下的等高布局margin-bottom:-600px;padding-bottom:600px;
• margin负值下的两栏自适应布局

margin无效情形分析

• inline水平元素的垂直margin无效
  两个前提：
  1、非替换元素，不是<img>元素
  2、正常书写模式
• margin重叠
• display：table-cell/table-row等声明的margin无效
• 绝对定位元素非定位方向上的margin无效（实际是起作用的，是一直有效）
• 内联特性导致margin无效