CSS 單位總結

經典真題

• px 和 em 的區別

CSS 中的哪些單位

首先，在 CSS 中，單位分為兩大類，絕對長度單位和相對長度單位。

絕對長度單位

我們先來說這個，絕對長度單位最好理解，和我們現實生活中是一樣的。在我們現實生活中，常見的長度單位有米（m）、厘米（cm）、毫米（mm），每一種單位的長度都是固定，比如 5cm，你走到任何地方 5cm 的長度都是一致的

例如：

<div class="container"></div>

.container{width: 5cm;height: 5cm;background-color: pink;
}

在上面的代碼中，我們設置了盒子的寬高都是 5cm，這里用的就是絕對長度單位。

常見的絕對單位長度如下：

這些值中的大多數在用于打印時比用于屏幕輸出時更有用。例如，我們通常不會在屏幕上使用 cm。

惟一一個經常使用的值，估計就是 px(像素)。

相對長度單位

相對長度單位相對于其他一些東西，比如父元素的字體大小，或者視圖端口的大小。使用相對單位的好處是，經過一些仔細的規劃，我們可以使文本或其他元素的大小與頁面上的其他內容相對應。

下表列出了 web 開發中一些最有用的單位。

上面的單位中，常用的有 em、rem、vw、vh，其中 vw 和 vh 代表的是視口的寬度和高度，例如：

<div class="container"></div>

*{margin: 0;padding: 0;
}
.container {width: 50vw;height: 100vh;background-color: pink;
}

在上面的代碼中，我們設置了容器的寬度為 50vw，也就是占視口的一半，而高度我們設置的是 100vh，就是占滿整個視圖。

接下來來看一下 em 和 rem。

em 和 rem 相對于 px 更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用于響應式布局。

對于 em 和 rem 的區別一句話概括：em 相對于父元素，rem 相對于根元素。

來看關于 em 和 rem 示例。

em 示例

<div>我是父元素div<p>我是子元素p<span>我是孫元素span</span></p>
</div>

* {margin: 0;padding: 0;
}div {font-size: 40px;width: 10em;/* 400px */height: 10em;outline: solid 1px black;margin: 10px;
}p {font-size: 0.5em;/* 20px */width: 10em;/* 200px */height: 10em;outline: solid 1px red;
}span {font-size: 0.5em;width: 10em;height: 10em;outline: solid 1px blue;display: block;
}

效果：

rem 示例

rem 是全部的長度都相對于根元素，根元素是誰？

那就是 html元素。通常做法是給 html 元素設置一個字體大小，然后其他元素的長度單位就為 rem。

例如：

<div>我是父元素div<p>我是子元素p<span>我是孫元素span</span></p>
</div>

* {margin: 0;padding: 0;
}html {font-size: 10px;
}div {font-size: 4rem;/* 40px */width: 30rem;/* 300px */height: 30rem;/* 300px */outline: solid 1px black;margin: 10px;
}p {font-size: 2rem;/* 20px */width: 15rem;/* 150px */height: 15rem;/* 150px */outline: solid 1px red;
}span {font-size: 1.5rem;width: 10rem;height: 10rem;outline: solid 1px blue;display: block;
}

所以當用 rem 做響應式時，直接在媒體中改變 html 的 font-size，此時用 rem 作為單位的元素的大小都會相應改變，很方便。

看到這里我想大家都能夠更深刻的體會了 em 和 rem 的區別了，其實就是參照物不同。

真題解答

• px 和 em 的區別

參考答案：

px 即 pixel 像素，是相對于屏幕分辨率而言的，是一個絕對單位，但是具有一定的相對性。因為在同一設備上每個設備像素所代表的物理長度是固定不變的（絕對性），但在不同設備間每個設備像素所代表的物理長度是可以變化的（相對性）。

em 是相對長度單位，具體的大小要相對于父元素來計算，例如父元素的字體大小為 40px，那么子元素 1em 就代表字體大小和父元素一樣為 40px，0.5em 就代表字體大小為父元素的一半即 20px。

-EOF-