HTML + css 页面按比例排版

这只是我自己的笔记，为了以后用的时候方便找到，如果有错误（估计是有），请留言告诉我，谢谢

以往比较习惯使用padding margin来排版，但是用于页面大小固定（如手机微信那种h5的页面，一次滑动翻一页，每一页大小一样），这样的写法并不适用。 比如当我有一个div 大小是width:100%,height:30%; 另一个div width：100%，height：40%；这样的单位设置是为了确保在任何设备上打开看到的排版效果是一样的。但是当我需要在第一个div上面空出屏幕高度10%的空间时，使用margin和padding都不能满足需要了。因为这里的margin-top:10%,并不是指的父层块元素的10%。所以 当我希望这个页面上面空10%，然后放第一个div ，再空10%，放第二个div，最下面再空10%时，用margin和padding就无能为力了。

在上面说的这样的情况下，如果要定位排版，就应该使用position：relative

先说说relative，它是根据原位置进行定位的。那么原位置是什么呢？还用刚才的例子，一个div 大小是width:100%,height:30%; 另一个