免費(fèi)AI編程助手
CSS的長度單位參考
CSS中有相當(dāng)一部分屬性的值是根據(jù)長度來定義的，而長度單位在CSS中并不是統(tǒng)一的，本文將詳細(xì)介紹CSS（及CSS3新增的）幾種長度單位，并給出常用場景。
按照大的類別來分，CSS的長度單位可分為絕對長度單位和相對長度單位。
絕對長度單位
絕對長度單位是一個(gè)固定的值，它反應(yīng)一個(gè)真實(shí)的物理尺寸。那么，常見的絕對長度單位有哪些呢？
in，英寸cm，厘米mm，毫米pt，pointspc，Picas
這些單位都是擁有真實(shí)的物理尺寸的以及確定的換算關(guān)系，比如，1in = 2.54cm。我們平時(shí)在書寫css代碼時(shí)，當(dāng)然也可以直接使用這些單位，并且也能夠在屏幕上表現(xiàn)。不過由于這些單位都是絕對長度單位，往往不利于頁面屏幕的渲染，這些絕對長度單位更多的使用場景往往是被用在印刷、打印等方向。
相對長度單位
CSS相對長度單位中的相對二字，表明了其長度單位會隨著它的參考值的變化而變化，不是固定的。下面是常用的一些相對長度單位，
px，Pixels像素em，元素的字體高度ex，x-height，字母x的高度%，百分比
px
參考文章1中將px歸為絕對長度單位，我并不太認(rèn)同這一點(diǎn)。
因?yàn)?strong>像素單位其實(shí)是和設(shè)備屏幕的分辨率是直接相關(guān)的。比如，有屏幕上有一個(gè)div，其寬度為100px，其在分辨率為800x600的屏幕上占據(jù)的寬度為1/8，而在1000x800的屏幕上占據(jù)的寬度是1/10。
在web開發(fā)中，像素現(xiàn)在仍然是典型（主流的）度量單位。當(dāng)然，你可以在web開發(fā)的過程中采用其他的單位，但是往往這些單位在渲染時(shí)都被映射換算成像素。
em
單位em的含義最初是指基于當(dāng)前字體大寫字母”M”的尺寸。所以當(dāng)改變font-size的大小時(shí)，這個(gè)長度單位將會發(fā)生變化。
現(xiàn)代所有的瀏覽器中，都會有這樣的一個(gè)默認(rèn)值，即1em = 16px，所以即使你忘記了設(shè)置font-size也不要緊。
關(guān)于em單位有下面幾點(diǎn)需要注意，
- 基于當(dāng)前元素的(如果沒設(shè)置就是繼承其父元素的)font-size
- em單位具有級聯(lián)關(guān)系
比如，
<div style="font-size: 12px;">
<span style="font-size: 2em">em單位</span>
</div>如上代碼中，span標(biāo)簽中設(shè)置了font-size: 2em，因?yàn)槠涓笜?biāo)簽設(shè)置了font-size: 12px，所以span標(biāo)簽的結(jié)果就是font-size: 24px。
再比如，
<div id="div1" style="font-size: 12px">
<div id="div2" style="font-size: 1.2em">
<div id="div3" style="font-size: 1.2em"></div>
</div>
</div>inspect結(jié)果如下，
可見div3和div2的font-size并不一致。其原因就是因?yàn)閑m長度單位有級聯(lián)效果。上述代碼的計(jì)算規(guī)則如下，
- div1：font-size，12px
- div2：font-size，12 * 1.2 = 14.4px
- div3：font-size，12 1.2 1.2 = 17.28px
至于為什么圖中會帶有那么多小數(shù)點(diǎn)，那是因?yàn)檫\(yùn)算浮點(diǎn)數(shù)都是不精確的，或者說浮點(diǎn)數(shù)的運(yùn)算都是有一定的精確度的。
接上，所以div3中的font-size：1.2em，此時(shí)這個(gè)em是相對div2的，而div2的font-size是相對div1的。div3中的em已經(jīng)不是div2中的em了。
百分比
%（百分比）對于font-size、line-height等屬性是基于其父元素的font-size的，而對于text-indent、margin、padding、width等屬性則是基于父元素的寬度的。
比如，
.box {
line-height: 130%;
font-size: 130%;
}這里的.box表示當(dāng)前元素的行高和字體大小是其繼承的（一般是當(dāng)前元素的最近父元素）font-size的130%，其實(shí)就等同于1.3em。
CSS3中新增的長度單位
CSS3中新增的長度單位有如下，
ch，字符0的寬度rem，根元素（html）的font-sizevw，viewpoint width，視窗寬度，1vw=視窗寬度的1%vh，viewpoint height，視窗高度，1vh=視窗高度的1%vmin，vmax等
新增的viewpoint相關(guān)的單位一般是針對移動(dòng)設(shè)備的。本文不打算針對其作詳細(xì)描述，欲知詳情請參見這篇文章。
rem其實(shí)跟em是一回事，只不過rem多了一個(gè)限制條件，它表示根元素（html元素）的font-size。
rem和em的區(qū)別，我們可以通過下面這個(gè)例子來看一看，
<html style="font-size: 12px;">
<body>
<div id="div1" style="font-size: 16px">
<div id="div2" style="font-size: 1.2em"></div>
<div id="div3" style="font-size: 1.2rem">
<div id="div4" style="font-size: 1.2em"></div>
</div>
</div>
</body>
</html>此時(shí)，
- div2的font-size:
16px*1.2em=19.2px - div3的font-size:
12px*1.2rem=14.4px - div4的font-size:
12px*1.2rem*1.2em=17.28px
可見，rem不存在級聯(lián)關(guān)系，而em存在級聯(lián)關(guān)系。
值得注意的是，IE8及以下、Safari 4、IOS 3.2等不支持rem單位。
更多建議：