常用的布局單位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是頁面布局的基礎(chǔ)，一個像素表示終端（電腦、手機、平板等）屏幕所能顯示的最小的區(qū)域，像素分為兩種類型：CSS 像素和物理像素：

????????1.CSS 像素：為 web 開發(fā)者提供，在 CSS 中使用的一個抽象單位；

????????2.物理像素：只與設(shè)備的硬件密度有關(guān)，任何設(shè)備的物理像素都是固定的。

（2）百分比（%），當瀏覽器的寬度或者高度發(fā)生變化時，通過百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實現(xiàn)響應(yīng)式的效果。一般認為子元素的百分比相對于直接父元素。

（3）em 和 rem相對于 px 更具靈活性，它們都是相對長度單位，它們之間的區(qū)別：em 相對于父元素，rem 相對于根元素。

????????1.em： 文本相對長度單位。相對于當前對象內(nèi)文本的字體尺寸。如果當前行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認字體尺寸(默認 16px)。(相對父元素的字體大小倍數(shù))。

????????2.rem： rem 是 CSS3 新增的一個相對單位，相對于根元素（html 元素）的 font-size 的倍數(shù)。作用：利用 rem 可以實現(xiàn)簡單的響應(yīng)式布局，可以利用 html 元素中字體的大小與屏幕間的比值來設(shè)置 font-size 的值，以此實現(xiàn)當屏幕分辨率變化時讓元素也隨之變化。

（4）vw/vh是與視圖窗口有關(guān)的單位，vw 表示相對于視圖窗口的寬度，vh 表示相對于視圖窗口高度，除了 vw 和 vh 外，還有 vmin 和 vmax 兩個相關(guān)的單位。

????????1.vw：相對于視窗的寬度，視窗寬度是 100vw；

????????2.vh：相對于視窗的高度，視窗高度是 100vh；

????????3.vmin：vw 和 vh 中的較小值；

????????4.vmax：vw 和 vh 中的較大值；

vw/vh 和百分比很類似，兩者的區(qū)別：

1.百分比（%）：大部分相對于祖先元素，也有相對于自身的情況比如（border-radius、translate 等)

2.vw/vm：相對于視窗的尺寸