1）px 畫素（Pixel）絕對單位。 畫素 px 是相對於顯示器螢幕解析度而言的，是一個虛擬長度單位，是計算機系統的數字化影象長度單位，如果 px 要換算成物理長度，需要指定精度 DPI。 2）em 是相對長度單位，相對於當前物件內文字的字型尺寸。 如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。它會繼承父級元素的字型大小，因此並不是一個固定的值。

div {
        font-size: 40px;  （這個就相當1em）父元素，其它子類元素以這個為參照物。進行換算   em = 需要換算成的px/父元素的font-size的px數值；
        width: 7.5em; /* 300px */
        height: 7.5em;
        border: solid 2px black;
    }
 p {
        font-size: 0.5em; /* 20px */
        width: 7.5em; /* 150px */
        height: 7.5em;
        border: solid 2px blue ;
        color: blue;
    }
 
span {
        font-size: 0.5em;
        width: 7em;
        height: 6em;
        border: solid 1px red;
        display: block;
        color: red;
    }

3）rem 是 CSS3 新增的一個相對單位（root em，根 em），使用 rem 為元素設定字型大小時，仍然是相對大小，但相對的只是 HTML 根元素。 區別：IE 無法調整那些使用 px 作為單位的字型大小，而 em 和 rem 可以縮放，rem 相對的只是HTML 根元素。 這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。 目前，除了 IE8 及更早版本外，所有瀏覽器均已支援 rem。

    這個和em類似，只是參照物不一樣，換算比例是一樣的！

em/rem:用於做響應式頁面，不過我更傾向於rem，因為em不同元素的參照物不一樣（都是該元素父元素），所以在計算的時候不方便，相比之下rem就只有一個參照物（html元素），這樣計算起來更清晰。