CSS 單位絕對單位相對單位

我們對單位很熟悉，比如說，千克，千公尺，公尺等，這些就是絕對單位，我們又有聽到太陽的質量等於33個地球，這個就是相對單位。在css中，單位也可以分為這兩類。

在第二個box裡,300px的小框跟上面的框的300px一樣長，而第二個框裡面的50%跟第乙個框的50%為不一樣，這個就很好的解釋了相對單位和絕對單位。

px 是 pixels（畫素）的縮寫，是一種絕對單位，用於螢幕顯示器上，傳統上乙個畫素對應於計算機螢幕上的乙個點，而對於高清屏則對應更多。任何現代顯示屏，不管是手機，平板，筆記本還是電視都是由成千上萬的畫素組成的，所以我們可以使用這些畫素來定義長度。

另外 css 將光柵影象(如**等)的顯示方式定義為預設每乙個影象大小為「1px」。乙個「600x400」解析度的**的長寬分別為「600px」以及「400px」，所以**本身的畫素並不會與顯示裝置畫素(可能非常小)一致，而是與 px 單位一致。如此就可以將影象完整的與網頁的其它元素排列起來。

%（百分比）應該是我們最好理解的單位了，這裡就不多解釋了，主要有一點需要注意：

em 也是一種相對單位，既然是相對單位，那麼肯定有乙個參照值。不過其參照值並不是固定不變的，而是不同的屬性有不同的參照值。

對於字型大小屬性（font-size）來說，em 的計算方式是相對于父元素的字型大小，1em 等於父元素設定的字型大小。如果父元素沒有設定字型大小，則繼續往父級元素查詢，直到有設定大小的，如果都沒有設定大小，則使用瀏覽器預設的字型大小。

下面我們舉幾個簡單的例子說明下：

.parent .child1 .child2 /* 父級元素都沒有設定大小的 */ .no-parent-font-size

在這些屬性中，使用em單位的計算方式是參照該元素的 font-size，1em 等於該元素設定的字型大小。同理如果該元素沒有設定，則一直向父級元素查詢，直到找到，如果都沒有設定大小，則使用瀏覽器預設的字型大小。

下面我們舉幾個簡單的例子說明下：

p /* 元素本身沒有設定字型大小且父級元素也沒有設定 */ .no-font-size

總之em的計算單位相對來說比較複雜，現在已經不建議使用，如果你要相容的瀏覽器是現代瀏覽器的話，那麼可以使用下面要介紹的 rem 單位。

和 em 一樣，rem 也是一種相對單位，不過不一樣的是 rem 是相對於根元素 html 的 font-size 來計算的，所以其參照物是固定的。（rem的r就是表示root，雖然rem相對em進步了很多，但是由於是新技術，不支援ie8以下（包括ie8）,不過幸喜的是移動端可以放心使用）

由於 rem 是基於跟元素 html 的 font-size 來計算的，所以如果改變 html 的 font-size 值，那麼所有使用的 rem 單位的大小都會隨著改變，這對於移動端適應各種螢幕大小來說還是有點作用的。

html div

如果我們改變了 html 的 font-size 值，如設定為 80px，則相應的我們的 div 的 width，height 和padding 大小也隨著改變了。

相對於 em 來說，rem 只需要修改 html 的 font-size 值即可達到全部的修改，即所謂的牽一髮而動全身。

最後要介紹的這四個單位屬於 v 系單位，它們也是相對單位，是基於視窗大小（瀏覽器用來顯示內容的區域大小）來計算的。

網頁中我們很多時候都需要用到滿屏，或者螢幕大小的一半等，尤其是移動端，螢幕大小各式各樣，而這個時候我們現有的單位就顯得有點捉襟見肘，於是就誕生了這四個單位。

下面我們例項說明實現乙個寬度為視窗寬度的 25%，高度為視窗高度 50% 的乙個盒子：

.box

同樣由於是新技術，還是有些瀏覽器不相容，哪怕在移動端安卓4.3 以下也是不相容，不過長遠來說這也是必備的。

除了設定以上的單位之外，我們還可以使用 calc 來進行單位運算，單位運算時可以使用各種單位進行加減乘除運算。

簡單示例如下：

.box

注：chrome 瀏覽器最小的字型為 12px，如果設定 10px 也會渲染成 12px 。

CSS 單位 絕對單位 相對單位