HTML + css 页面按比例排版

HTML + css 页面按比例排版

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

不能使用margin和padding排版

以往比较习惯使用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，通过top、left来排版

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

先说说relative，它是根据原位置进行定位的。那么原位置是什么呢？还用刚才的例子，一个div 大小是width:100%,height:30%; 另一个div width：100%，height：40%；那么正常来看，在这个页面就是上面的一个方块从左上角开始，宽度全屏（之后不再说宽度了），高是浏览器宽度的30%，下面一个宽度是40%。
这时，如果给第一个div设置position：relative；top：10%；那么第一个div占用的空间就是浏览器上10%-40%的高度，第二个呢？

注意 第二个div还是在30%-70%的位置，并不会被第一个div的移动挤到下面去。 所以，如果当我希望这个页面上面空10%，然后放第一个div ，再空10%，放第二个div，最下面再空10%时，第一个div top：10%，第二个div top:20%,这个20%，是相对于最初始自己的位置来移动的，10%用于随着第一个div的移动，另10%用来空出空间来。

left和top的原理是一样的，都是根据当前元素自身的本身的位置进行移动。

这个relative 的神奇之处就在于，对于第二个div来说，第一个div用top改变了位置，但是它仿佛还在原来的位置，那个空间没有动，第二个div还是紧挨着那个位置摆放