css参考文档 http://css.doyoe.com/
两篇很好的文章：（下面的css官方英文说明链接 有时间可以研究下
- http://www.w3.org/TR/css3-box/#margins
- http://dev.w3.org/csswg/css-box/#the-margin-properties
- http://dev.w3.org/csswg/css-box/#Calculating
）
1 http://www.ituring.com.cn/article/64581
无论padding 还是margin参照物都是 包含元素（父元素）的宽度
2 http://www.ituring.com.cn/article/64580
纵向auto为0，横向auto为可用的剩余空间
3 div 在另一个div里垂直居中的方法：
方法1：原理，利用绝对定位和margin。当子div设置了absolute，并且top 和 bottom（必须上下或左右同时设置值才可以）设置了值之后，margin=auto在纵向上的值不再是0而是纵向剩余空间（可用空间）
.parent {
width:800px; height:500px;
border:2px solid #000;
position:relative;（此设置是为了让子div以此为定位参照物）} .child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
} 方法二：利用display：table-cell模拟表格，然后设置vertical-align:middle（CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。）
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;(垂直居中)
vertical-align:middle;（垂直居中）
text-align: center;（水平居中）
} .child {
width:200px;
height:200px;
display:inline-block;（水平居中）
background-color: red;
} 方法三：原理： display:flex; .parent {
width:800px; height:500px; border:2px solid #000; display:flex; justify-content:center; 点击查看justify-content的详解 align-items:center; 点击查看align-items详情
点击查看align-items和align-content的区别
说明:1：align-content只针对有多行的子元素，只有一行则没有效果 2：多行的align-content:space-around和多行的align-items:center效果一样。
点击查看align-self的详情 } .child { width:200px; height:200px; background-color: red; }方法四：浅谈display:flex (父元素：display:flex, 子元素：margin:auto; 即可上下左右居中，通过margin可以调控位置)
.parent {
width:800px; height:500px; border:2px solid #000; display:flex; } .child { width:200px; height:200px; background-color: red; margin: auto; }
