⼀、CSS中的長度單位
在CSS中以不少值是以長度作為值的，盒⼦模型的屬性就是⼀些明顯的值屬性：width、height、margin、padding、border。除此之外還有很多的css屬性的值同樣也是長度值，像偏移量offset、box-shadow的⼤⼩或字體⼤⼩、間距等，在CSS中存在眾多的長度單位，下⾯我們就來說⼀下長度單位以及它們的⽤途。
⼆、簡單的介紹（長度單位都有哪些：）
在CSS的長度單位分為兩種：絕對長度和相對長度。
絕對長度：px、in、cm、mm、pt、pc；
相對長度：em、rem、ex、vh、vw、vmin、vmax、%、fr。
三、詳細的介紹
1. 絕對長度單位
絕對長度單位表示一個真實的物理尺寸，它的大小是固定的，不會因為其它元素尺寸的變化而改變。下表中列舉了CSS 中支援的絕對長度單位。
px：表⽰像素，像素是相對於螢幕解析度的，頁⾯按照精確像素展⽰，不會因為其它元素的尺⼨變化⽽變化，像素仍然是最典型的度量單位，例如： windows 的⽤戶所使⽤的分辨率96像素/英⼨ ，⽽ mac 的⽤戶所使⽤的分辨率⼀般是72像素/英⼨ ，⼀般javascript語⾔⾥的單位就是使⽤的像素。
div{width:200px;}in：英⼨（inch）是⼀個物理度量⽂件，但是在CSS領域，英⼨只不過被直接映射成像素罷了。 （1in == 2.54cm == 96px）
div{width:2in;}c m：厘⽶是⽐較熟悉有⽤的物理度量單位。它也映射成像素。 （1cm == 37.8px）
div{width:20cm;}mm：毫⽶是個⼩數量級的物理度量單位。 （1mm == 0.1cm == 3.78px ）
div{width:200mm;}p t：點（Points）也是物理長度單位。 （1pt == 1/72in == 96/72px）
div{width:20pt;}pc：派卡（Pica）和points⼀樣，只不過（1pc == 12pt）。
div{width:20pt;}舉例：
<!DOCTYPEhtml><html><head><title>絕對長度單位</title><style>.box{width:4in;height:4.5cm;border:2mmsolidblack;font-size:16px;}.pt{font -size: 2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>這是16px的字體<pclass=pt>這是2pt的字體</p><pclass =pc>這是3pc的字體</p></div></body></html>呈現出來的結果如下：
2. 相對長度單位
相對長度單位指的是這個單位沒有一個固定的值，它的值受到其它元素屬性（例如瀏覽器視窗的大小、父級元素的大小）的影響，在響應式佈局方面相對長度單位非常適用，下表中列舉了CSS 中支援的相對長度單位。
em：em是⼀個相對單位，相對於當前物件內⽂本的字體尺⼨，如當前對⾏內的字體尺⼨未被⼈設置，則相對於瀏覽器的預設字體尺⼨。起初排版度量時是基於當前字體⼤寫字母M 的尺⼨的，當改變font-family時，它的尺⼨不會發⽣改變，但在改變font-size的⼤⼩時，它的尺⼨就會發⽣改變， em 會繼承⽗級元素的字體⼤⼩。 (下⾯有關於em 和rem 的例⼦)
在沒有任何CSS規則的前提下：（1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm）
div{width:40em;}r em：rem 和em ⼀樣是⼀個相對單位，但是和em 不同的是rem 總是相對於根元素（如：root{}），⽽不像em⼀樣使⽤級聯的⽅式來計算尺⼨。這種相對單位使⽤起來更簡單。
div{width:40rem;}ex：相對長度單位，相對於字元x 的⾼度，此⾼度通常為字體尺⼨的⼀半，如當前對⾏內的⽂本的字體尺⼨未被⼈為設置，這相對於瀏覽器的預設字體尺⼨。和em 不同，當改變font-family 時em 不會改變，⽽ ex 單位會變化，因為⼀個單位的值和那個字體是特殊的約束關係。
div{width:40ex;}ch：ch的內涵和ex相對於x的⾼度相似，只是ch 是基於字元0 的寬度的⽽不是基於字元x ⾼度的。 1ch也就是數字0的寬度，當fontfamily 改變的時候ch 也會跟著改變。
div{width:40ch;}vw：vw（viewpoint width）是可視寬度單位（視窗寬度）， 1vw 等於可視區寬度的百分之⼀ ，vw單位跟百分⽐很相似，不同的是vw所有的值對所有的元素都⼀樣，與他們⽗元素或⽗元素的寬度⽆關，有點像rem單位那樣總是相對於根元素。 (下⾯有關於vh 和vw 的例⼦)
div{width:40vw;}vh：vh（viewport height）和vw（viewport width）單位⼀樣，不同的vh是相對於可視區的⾼度（視窗⾼度）。
div{width:40vh;}vmin：vmin的值是當前vw和vh中較小的值，在標準尺⼨類型的使⽤實例中，和由⾃⼰確定屏幕大小的vw、vh單位相⽐，vmin是⼀個更有⽤的度量標準。
div{width:40vmin;}vmax：vmax的值是vw和vh中較⼤ 的那個值。
div{width:40vmax;}%：百分比，以百分⽐為單位的長度值是基於具有相同屬性的⽗元素的長度值，例如：如果⼀個元素呈現的寬度是450px，子元素的寬度設為50%，那麼⼦元素呈現的寬度為225px。 （如果所有的⽗級元素都沒有設定具體的值，那麼設定百分⽐⾼度那會導致所有的元素的值都為0）。
div{width:40%;}fr：gird佈局中利⽤的⼀個長度單位，在gird佈局中，我們常常會利⽤fr來進⾏計算。
下⾯這句語句則是聲明三⾏的gird，第⼀⾏的⾼度為30px，第⼆⾏的同樣為30px，第三⾏的為60px。
grid-template-rows:30px1fr2fr;
舉例：
<!DOCTYPEhtml><html><head><title>相對長度單位</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- size:2em;}.ex>span{font-size:3ex;}.ch>span{fon t-size:4ch;}</style></head><body><divclass=box>這是16px的字體<pclass=info>這是2em的字體</p><pclass=ex>x：< span>這是3ex的字型</span></p><pclass=ch>0：<span>這是4ch的字型</span></p></div></body></html>展示如下：
3.長度單位的總結：
（1）⾸先要明⽩⼀點，那就是螢幕解析度究竟是什麼，我們知道在不同的解析度下，像素點的⼤⼩是不同的，所以同⼀個⽹頁，以px作長度單位時，在不同的解析度下顯⽰的⼤⼩是不同的，在低解析度下，像素點較⼤，細節不夠清晰，雖然顯⽰的頁⾯也⼤，但模糊不清。
（2）實際上，所有的單位，⽆論是相對還是絕對單位，（在屏幕上的顯⽰時）最終都是轉化為px單位的，所以⼀般來說，在⽹頁製作時，基本單位都選擇px ⽽不是pt，因為pt 也是透過瀏覽器的DPI 轉換成px 顯⽰（⽐如FireFox的DPI是96，則有9pt = 12px）。不只pt，cm、in、mm等單位也是轉換成px的，所以⽆論⽤絕對還是相對，在不同的解析度下都是會變的，不要以為把長度設定為3cm，它就會在不同的解析度下保持3cm不變。
（3）我覺得pt 還是很有⽤的⼀個單位，在打印時尤其如此，現在有的⽹頁以及經實現了顯⽰是⼀個頁⾯，打印⽤另⼀種⽅式，我想在打印上就採⽤ pt吧，因為針對不同的分辨率，印出來的頁⾯都是⼀樣的⼤⼩，這就是絕對單位的第⼀特徵，但是依然要記住，在顯⽰上，這個單位代表的不是真實物理長度，它也是要根據像素的實際⼤⼩（這個跟解析度有關）進⾏調整的。
（4）實際上我們可以這樣理解，將px看做絕對單位（顯⽰上的絕對單位），其它的單位都是以它為基礎的，⽐如em，它就是相對當前⽂本字體的⾼度（假設目前⽂本字體的尺⼨是12px，我們設定新的字體為1.5em，則新的字體尺⼨轉換為12 * 1.5 = 18px），要記住的就是em是相對於⽗級元素的⾼度，假設第⼀個div中我們設定了字體為12px，第⼆級我們設定1.5em，第三級我們設定1.5em，實際上字體的顯⽰是：第⼀級12px，第⼆級18px，第三級18 * 1.5 = 27px。