margin

一、元素尺寸

我们看下标准盒模型

最里面的黑色实现框内宽为可视尺寸：clientWidth（标准）

之外的一层虚线内宽为占据尺寸：outerWidth（包含margin）

二、margin 与可视尺寸

（1）是用于没有设定width/height的普通block水平元素

不包括float absolute/fixed inline table-cell

（2）只适用于水平方向尺寸

（3）使用场景：一侧顶宽的自使用布局

三、margin 与占据尺寸

（1）block/inline-block元素都使用

（2）与有没有设定width/height值无关

（3）适用于水平方向和垂直方向

四、margin 与百分比单位

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

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

五、margin重叠

（1）发生的情况：

普通的block水平（不包括float absolute）

不考虑writing-mode（让元素水平显示,），只发生在垂直方向（margin-top/margin-bottom）

（2）重叠的3中情景

相邻的兄弟元素

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

空的block元素

对于第二种情形，父子margin重叠的其他条件

a 父元素非块状格式化上下文

b 父元素没有border-top/bottom设置

c 父元素没有padding-top/bottom设置

d 父元素和第一个子元素/最后一个子元素之间没有inline元素分割

e （对于margin-bottom重叠 ）父元素没有height，min-height,max-height限制。

于是，通过改变如上的情况就可以干掉重叠了。

（3）计算方法

正正取大值 正负值相加  负负取绝对值最大的

（4）善用margin重叠

有的时候需要在一个表单列表中使用margin,拉开彼此的距离，为了更加具有健壮性，防止最后一个元素移除或者位置调换，影响到原来的布局，我们可以这样：

.list{ margin-top:15px; margin-bottom:15px;}

六、margin :auto（用来计算剩余空间的，前提是元素占据整个容器，填充整个空间）

（1）一侧是定值，一侧auto,auto为剩余空间大小

（2）两侧若都是auto,则平分剩余空间

.div{width:100px;margin:0 auto;}

（3）absolute 与margin居中

.father{height:100px;position:relative;}

.son{position:absolute;top:0;right:0;bottom:0;left:0;width:200px;height:50px;margin:auto}

如上的absolute拉伸已经不起作用了,因为本身就存在宽高，这是是水平垂直居中的，适用于IE8+。

七、应用margin负值

（1）我们通常在制作ul/ol列表的时候，让他们的li排成一排，比如制作导航栏的时候，每一个列表之间都通过margin-right:10px;设置一个间距，但是到了最后一个li的时候，我们不想要它的margin-right，这是方法一是手动添加style使得它的margin:0,但是不建议这样做，我们采用第二种方法,应用了margin可以改变元素尺寸。

.ul{overflow:hidden;margin-right:-10px;}

（2）两列布局，右侧宽度固定，左侧自使用，我们通常的做法是利用dom元素顺序与实际元素顺序相反的那个方法来实现，但是还有个不用颠倒顺序的方法：

<div style='float;left';width:100%>

    <p style='margin-right:170px'>这是一段文字<p>

</div>

<img width='100' style='float:left';margin-left:-100px;>

八、margin无效的情形

（1）inline元素垂直margin无效

（2）margin重叠

（3）display:table-cell/table-row margin无效

九、margin-start  and margin-end

在正常的流向中，margin-start等同于margin-left,二者重叠不累加

如果水平流式从右往左，margin-start等同于margin-right

在垂直流下（writing-mode:vertical-*），margin-start等同于margin-top