闲来又无聊
木有女票子的宅男周末总是这么蛋疼，何况现在临近春节了【2月份了】
时间都是在不知不觉中溜走。也许，每个人现在都计划春节回家该喝几场酒席，该交多少的红包~~那么，假如你是也一个蛋疼的狗，在周末无聊不懂作甚，那么不妨看看这篇蛋疼的文章吧，反正也不懂做什么事，做点无聊的事情呗。
尽是无聊的小测试前戏
周五的时候写了一篇关于 垂直居中 table-cell ，其中的第三个方法里面提到了利用 position + margin 可以达到垂直居中的办法，但是前提是必须得知其显性高度值，否则无法得到垂直居中的效果。今天的主题就是来测试下两个属性。
margin
margin可以设置一个元素的外边距，有4个属性值，分别是长度length、百分比percentage、auto、inherit，其中它的默认值为0，长度和百分比都是指定一个长度值，这里不做讨论，inherit是从父元素继承其外边距，根据具体情况算出，下面来看看auto。
假设一个宽700px，高度200px的父容器包含一个宽度500px，高度72px的子元素，子元素设置 以下auto值：
1.margin-top:auto，此时auto等值0
2.margin-right:auto，此时auto等值200px
3.margin-bottom:auto，此时auto等值0
4.margin-left:auto，此时auto等值200px
假如上左下右边距都是设置为 auto 得到以下属性值
此时，子元素水平居中在父元素，上下外边距的auto等于0，而左右外边距的auto等于100px，为什么上下边距的auto都是0，而左右的边距的auto都是100px，个人的见解是这样：在正常流布局中，文档的渲染都是从左上角到右下角，在没有破坏其正常流的情况下 margin-top:auto等值于 margin-top:0，这也是我们需要看见的。我们肯定不希望我们的文档一旦设置了margin-top:auto 就直接在上面元素上外边距增加一个数值并撑开页面的高度，同理 margin-bottom也是一样。但是对于 margin-right和margin-left 我们看下当右外边距设置为auto的时候，其实它的 他的值是200px，而子元素本身的宽度是500px，他们相加之和就是等于父容器的宽度值，宽度不会平白消失，它只是以另外一种形式转化，突然我怎么想到了能量守恒定律？！在正常流布局中，子容器左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距之和等于父容器宽度，假如左右外边距其中有一边为auto，另外一边不设置，那么此时auto的值就等于父容器宽度 - 子容器(width + border + margin-*)之和，不知这样是否可以解释各位对 margin 的迷惑？因此我=突然再想平常我们的 margin:0 auto 中的0在正常流布局来说是否是多余的？
或者你可以点击查看→demo margin-for-auto测试性代码，下面来说说定位属性 position
position属性
position总共有五个属性值，分别是默认值 static和relative,absolute,fixed,inherit，对应的中文解释是静态定位，相对定位，绝对定位，固定定位，继承定位。给默认值static，赋值top,right,bottom,left都是不会被应用的，在这里不做过多研究，不信可以在本地写一个demo自己亲自测试一下~.~
2.relative相对定位，该属性会按照正常流布局，不会脱离文档，该属性可以达到垂直居中的效果，前提是知道容器的显性宽度和高度值和其包含块的宽高值，否则无法达到垂直居中的目的，并且一旦左侧有图片，那么要考虑的问题就会更加复杂，因此用此方法来达到垂直居中的目的显然是多此一举。
3.fixed固定定位，固定定位是相对视窗的固定定位，应用该属性的元素将会被钉在屏幕上，不管你的页面有多宽多高，永远钉在指定的位置，除非人为干涉，因此此属性很野蛮，目前用的最多的应该是导航的固定定位吧。
4.absolute绝对定位，应用该属性值的元素将会从正常的文档流删除，它的包含块是非 static 的祖先元素。单独设置上左右下偏移量为 auto 时，因为这是默认值，因此此时没有任何改变，其表现出还是像正常布局一样。
假设一个宽700px，高度200px的父容器包含一个宽度500px，高度72px的子元素
①.当上偏移量都为0时，此时子元素相对其包含块只是指定了 margin-right:200px;
②.当右偏移量都为0时，此时子元素相对其包含块只是指定了 margin-left:200px;
③.当下偏移量都为0时，此时子元素相对其包含块只是指定了 margin-right:200px;
④.当左偏移量都为0时，此时子元素相对其包含块只是指定了 margin-right:200px;
当然，这只是它表现出来的相似性，本质不是，就算是增加了 margin:auto，auto的值也都是变成了默认值0，你可以点击查看→demo position-单边测试性代码
所有的子元素都加上margin:auto并且设置两个外边距值为0；
①.当top:0;right:0时，子元素相对包含块等值 margin-left:200px，
②.当top:0;bottom:0时，子元素相对包含块等值 margin-top:64px;margin-bottom:64px;
③.当top:0;left:0时，子元素相对包含块等值 margin-right:200px
④.当right:0;bottom:0时，子元素相对包含块等值 margin-left:200px,marin-top:128px;
⑤.当right:0;left:0时，子元素相对包含块等值 margin-left:100px,marin-right:100px;
⑥.当bottom:0;left:0时，子元素相对包含块等值 margin-right:200px,marin-top:128px;
你可以点击查看→demo position+margin测试性代码
所以，当我们把这四个偏移量都设置为0之后，并且把外边距设置为auto时，他就呈现出来垂直居中显示，如下代码
.test{
width: 500px;
height: 72px;
position: absolute;;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
上面这些值都缺一不可，都是必需的！margin + top + bottom 是让子元素脱离正常流布局，但是又拥有在正常流上下外边距 margin-top:auto;margin-bottom:auto 原本的值【类似margin-right:auto会自动变成200px】，而margin + left + right 则是还原本来 margin:auto 居中的特性，从而达到了盒子的平衡：
子容器左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距之和等于父容器宽度
子容器上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距之和等于父容器高度
一切又回到了盒子，css中都是盒子模型，一切都是盒子，不管页面多么花哨，多么复杂，所有的一切都是回归其本质来讲，那就是盒子模型！
晚安
还没有检查错别字，明天再检查，先睡觉了~~假如你觉得不是这么理解，不妨也说说你对此的见解？
参考资料：
position<br