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;
}.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;
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;
}
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:flex;
}
.child {
width:200px;
height:200px;
background-color: red;
}