講解css單位px、em、rem的含義

1、首先介紹一下px

   px就是css中最基本的長度單位了，用px作單位基本上沒什麼問題，能夠作到讓頁面按套路精確的展示
   px是相對於顯示器分辨而言的
   若是全篇用px佈局會暗藏一個蛋疼的問題，就是當用戶用ctrl滾頁面的時侯(說白了就是ctrl+,ctrl-)，你會發現頁面結構產生了不可預知的錯亂，所以有磚家倡導使用em替代px....

2、接下來介紹一下em

   若是你從上到下閱讀批文，你應該已經知道了em出現的緣由，下面說說em的特性，簡單的講px是絕對單位，1px就是1px，2px就是2px，以此類推，而em是相對單位，em是相對的基準點就是瀏覽器的字體大小，瀏覽器默認字體大小是16px,也就是1em默認等於16px,若是你想給某個文字設定爲14px，就這樣寫font-size:0.875em;樣式表都用em來寫的話，就能夠解決ctrl+,ctrl-時形成的頁面錯亂問題。
   這時侯有人就會抱怨了，數學是體育老師教育的，除以16我怎麼可能算明白，那好辦，你能夠在根節點上重定義基準號html{font-size:62.5%},此時頁面基準字號就是16px*62.5% = 10px,那麼此時1em=10px,那麼些時14px = 1.4em依此類推


   可是,問題又來了，em準確的說是相對於父節點的字號來計算的，若是自身定義了字號那麼就相對自身字號來計算，舉例以下:
    html { font-size:100%}
    .box-0 {
         height:1em;//此時height等於16px;
     }
    .box-1 {
        font-size:0.625em;//此時基準字號以變動爲16*0.625=10px
        height:1em;//此時實際height等於10px;
    }
    看明白了吧，整個頁面內1em並非一個固定不變的值，1em不停的變換，再加上數學是體育老師教的，這不是自做孽嗎。。。不要緊，css3爲咱們引入一個新的單位就是rem能夠解決這個問題

3、最後介紹一下主角rem

    rem與em同樣也是一個相對單位，爲了方便理解，咱們就理解rem爲root em顧名思義rem只相對跟節點計算，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同em，默認1rem=16px;同理你能夠設定html{font-size:62.5%}那麼1rem就等於10px,以此類推    聲明一下:rem是css3屬性，沒錯!這就是說ie678不支持rem屬性，只有chrome、firefox等高富帥支持。那麼咱們就在ie678中用px作兼容處理，例如：    .box {       font-size:14px;       font-size:0.875em;    }