布局中的各种百分比的含义
1.margin,padding
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！。
- 如果需要设置固定宽高比，可以设置padding-bootom，并将height设置为0.这样整个内容的高度都是有padding撑起来的，由于padding设置成百分比又是以父元素的width为参照的，而width也是以父元素的width为参照的。so......
因为heigth设置成了0，所以通过设置line-height与height等高来做到垂直居中就不可能了。我一般都用position或者margin来实现，网上看了很多用dispaly=table,然后子元素设置成table-cell的，这样会让height设置失效好像，感觉跟这种设置不搭
- 另外除了满足固定宽高比例之外呢，我建议在每个img外面都包裹一层div设置他们的padding，这样当图片没加载出来的时候不会变形，也不会出现突然一闪的情况
这里还需要说明一下；margin-top，在我做项目时会经常发现失效的情况，当我在子div内设置margin-top时不是如预想的那样在子父之间出现间隔，而是连着父元素一起下沉。具体的解释见margin-top失效
2.left,top
left和top后面出现百分比的形式时，分别是以父元素的宽和高为参照的。
float和position
- position:relative并不会脱离文档流，并且也不会改变display属性。即如果span应用了relative，仍不会变成块状结构。
- position:absolute会脱离文档流，并且会将display属性改为block。并且会将块状元素的width变为auto。 设置了position之后margin仍然有效
- float属性会脱离文档流（但注意不会脱离文字流），即还会给其中的内容留下位置。并且也会改变dom的display的属性
- 元素同时应用了position: absolute及float属性，则float失效。
- 第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同），反过来也是一样
