Margin详解

1. margin 重叠问题 因为内容比较多，总结起来不是很方便，我写了一个demo，可以方便查看：margin重叠解读

2. margin 百分比计算规则

		百分比margin的计算规则：
		普通元素的百分比margin都是相对于容器的宽度计算
		<div class="container">
			<img src="1.png" style="margin: 10%;" />
		</div>
		百分比margin的计算规则：
		绝对定位元素的百分比margin是相对于第一个定位祖先元素（fixed/relative/absolute）的宽度计算的
		<div class="father" style="position:absolute">
		<div class="container">
			<img src="1.png" style="margin: 10%; position:absolute;" />
		</div>	
		</div>
	

3.margin auto属性解读

		先说下绝对定位：设置left right ，是根据除static以外的第一个父元素进行定位(relative/absolute/fixed)。（海信技术一面问过）。<br/>
		本文主要讲解margin属性中auto，以及常见事例，因为蓝标一面问过，感觉自己在这里答的不是很理想(原问题：如何实现图片水平垂直居中)，所以查阅资料后，总结下。
		margin: auto 自动填充，用来分配剩余空间的<p/>
		问题1:
		图片margin :0 auto 不水平居中？<br>
		<img src="1.png" style="width:150px;margin:0 auto"><br/>
		因为图片是inline水平，就算没有width，也不会自动填满整个容器。何来剩余空间？
		解决方案：<br>
		<img src="1.png" style="display:block;width:150px;margin:0 auto"><br/>
		问题二：
		margin:auto 0;无法垂直居中？
		<div class="father" style="height:200px; background-color:#f0f3f9">
			<div class="son" style="height:100px; width:500px; margin:auto; background-color:blue"></div>
		</div>
		因为不设置son的高度，son的高度也不会自动填充，那该如何实现呢？
		1.writing-mode:vertical-lr;
		<div class="father" style="height:200px; background-color:#f0f3f9; writing-mode:vertical-lr;">
			<div class="son" style="height:100px; width:500px; margin:auto; background-color:blue"></div>
		</div>
		改变了流的方向，为垂直方向，则实现了垂直方向的居中，但水平方向就不会了
		2.绝对定位元素的margin:auto居中
		先回顾一个绝对定位的特性：
		<div class="father" style="height:200px; background-color:#f0f3f9; position:relative">
			<div class="son" style="position:absolute; top:0; right:0; bottom:0; left:0; background-color:pink "></div>
		</div>	
		没有width height，ablolute元素会自动填充整个容器
		<div class="father" style="height:200px; background-color:#f0f3f9; position:relative">
			<div class="son" style="position:absolute; top:0; right:0; bottom:0; left:0; background-color:pink ;width:500px; height:100px ;margin:auto "></div>
		</div>
		设置width height后，自动填充会被干掉，设置margin:auto ，就会水平垂直居中，忘记了哪场笔试有考设计弹窗的水平垂直居中。ie8以上支持