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還是緊挨着那個位置擺放