margin小结

标签：border   lock   绝对定位   min   左右   dir   垂直   没有   重叠   

一. margin百分比

1. 普通元素的百分比margin都是相对于容器的宽度计算
2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算

这是在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，
若书写模式变成纵向的时候，其参照将会变成包含块的高度。

二. margin重叠

1. 通常特性
　　block水平元素（不包括float和absolute元素）
　　不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）

2. 重叠的3种情境

A.相邻的兄弟元素

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

　　子元素的margin-top相当于父元素的margin-top
a.margin-top重叠
　　父元素非块状格式化上下文元素
　　父元素没有border-top设置
　　父元素没有padding-top值
　　父元素和第一个子元素之间没有inline元素分隔

b.margin-bottom重叠
　　父元素非块状格式化上下文设置
　　父元素没有border-bottom设置
　　父元素没有padding-bottom值
　　父元素和第一个子元素之间没有inline元素分隔
　　父元素没有height，min-height，max-height

C.空的block元素

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

3. 计算规则
　　正正取大值
　　正负值相加
　　负负最负值

三. margin auto

margin的值为auto，是自动占据包含块的剩余空间，例如

<div id="demo">
    <p>恩，我就是那个p。</p>
</div>

#demo{
　　width: 500px;
}
#demo p{
　　width: 100px;
　　margin-left: auto;
}

则p的实际margin-left为500-100=400px，p元素右对齐

当margin-left和margin-right同为auto时,左右平分剩余空间，元素居中

参考：https://segmentfault.com/a/1190000006212076
        http://www.ituring.com.cn/article/64580
        http://www.ituring.com.cn/article/64581 

margin小结

标签：border   lock   绝对定位   min   左右   dir   垂直   没有   重叠   

原文地址：http://www.cnblogs.com/mengff/p/6083058.html