思考一下
css中的長度單位有哪些？
px, pt，em，rem，%， vw，vh，vmin，vmcx，ex，ch，cm，mm，in(inch)，pc ···
px，em，rem，%四種，下文中我們將對常用的長度單位重點分析，對非常用的長度單位簡單介紹。
首先我們要知道css中的長度單位可以分為兩類：相對長度單位 和 絕對長度單位 。
相對長度單位
css相對長度單位中的 “相對” 二字，表明了其長度會隨著它的參考值的變化而變化，不是固定的。所以，在使用相對長度單位之前一定要知道其 參考元素 是什麼。
1、px (pixel)
思考：
1px到底有多長？
關於px的相關資訊 《CSS畫素、物理畫素、邏輯畫素、裝置畫素比、PPI、Viewport》 這篇文章中已經介紹的很詳細很詳細。下面對px進行概括總結。
瀏覽器內的一切長度都是以CSS畫素為單位的，CSS畫素的單位是px，px是一個相對單位，相對的是裝置畫素(device pixel)，也就是物理畫素，其相對性體現在在同一個裝置上或在不同裝置之間每1個px所代表的物理畫素是可以變化的。
那麼
px到底是什麼？
px實際是pixel（畫素）的縮寫，根據 維基百科的解釋，它是影像顯示的基本單元，既不是一個確定的物理量，也不是一個點或者小方塊，而是一個抽象概念。所以在談論畫素時 一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！
不同的裝置，影像基本取樣單元是不同的，顯示器上的物理畫素等於顯示器的點距，而印表機的物理畫素等於印表機的墨點。而衡量點距大小和印表機墨點大小的單位分別稱為ppi和dpi：
ppi：每英寸多少畫素數，放到顯示器上說的是每英寸多少物理畫素及顯示器裝置的點距。
dpi：每英寸多少點。
關於印表機的點距我們不去關心，只要知道 當用於描述顯示器裝置時ppi與dpi是同一個概念 。
CSS畫素的真正含義
由於不同的物理裝置的物理畫素的大小是不一樣的，所以css認為瀏覽器應該對css中的畫素進行調節，使得瀏覽器中 1css畫素的大小在不同物理裝置上看上去大小總是差不多 ，目的是為了保證閱讀體驗一致。為了達到這一點瀏覽器可以直接按照裝置的物理畫素大小進行換算，而css規範中使用 參考畫素 來進行換算。
1參考畫素即為從一臂之遙看解析度為96DPI的裝置輸出（即1英寸96點）時，1點（即1/96英寸）的視角。它並不是1/96英寸長度，而是從一臂之遙的距離處看解析度為96DPI的裝置輸出一單位（即1/96英寸）時視線與水平線的夾角。通常認為常人臂長為28英寸，所以它的視角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。
由於css畫素是一個視角單位，所以在真正實現時，為了方便基本都是根據裝置畫素換算的。瀏覽器根據硬體裝置能夠直接獲取css畫素。
這個換算過程有些燒腦，感興趣的同學自己去研究css規範。下面兩個不同裝置物理畫素轉換為css畫素的對比。
| 裝置名稱 | 螢幕（裝置）解析度 | 瀏覽器最大寬度（css畫素） |
|---|---|---|
| 14英寸MacBook PRO | 2560dp x 1600dp | 1440px |
| 13.3英寸HP 440 G5 | 1366dp x 768dp | 1366px |
2、em
em用來適應使用者所使用的字型，1em相當於當前的字型尺寸（font-size屬性），2em相對於當前字型尺寸的2倍。
- 如果當前元素的父元素設定了
font-size，則em參考元素為其父元素。 - 如果當前元素的父元素沒有設定
font-size，則逐級向上查詢有設定font-size屬性的元素，直到<html>根元素。 - 如果當前元素的父元素向上所有父元素均沒有設定
font-size，則em其參考大小為瀏覽器預設大小16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--此處樣式可忽略-->
<style>
.box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px;
border: 1px solid dodgerblue; float: left;}
.box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto;
margin-right: auto;border: 1px solid darkorchid; }
</style>
</head>
<body>
<div class="box-out">
16px字型(瀏覽器預設大小)
<div class="box-inner" style="font-size: 1em">
1em字型
</div>
</div>
<div class="box-out" style="font-size: 14px">
14px字型
<div class="box-inner" style="font-size: 1em">
1em字型
</div>
</div>
<div class="box-out" style="font-size: 14px">
14px字型
<div class="box-inner">
<span style="font-size: 1.5em">1.5em字型，相當於(14*1.5 = 21)px</span>
</div>
</div>
<div class="box-out" style="font-size: 24px">
24px字型
<div class="box-inner" style="font-size: 0.5em">
<span style="font-size: 1.5em">1.5em字型，相當於(24*0.5*1.5 = 18)px</span>
</div>
</div>
</body>
</html>
複製程式碼妙招：段落首行縮排兩個漢字
.indent {
text-indent: 2em;
}
複製程式碼3、rem
rem 即 root em，其參考元素為文件的根元素<html>中font-size屬性。
- 如果文件根元素
<html>沒有設定font-size屬性，那麼當前元素rem相對於瀏覽器預設字型大小16px - 如果文件根元素
<html style="font-size: 20px">設定了font-size屬性，那麼當前元素rem相對於文件的根元素<html>
<!DOCTYPE html>
<html lang="en" style="font-size: 20px">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--此處樣式可忽略-->
<style>
.box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px;
border: 1px solid dodgerblue; float: left;}
.box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto;
margin-right: auto;border: 1px solid darkorchid; }
</style>
</head>
<body>
<div class="box-out">
20px字型(文件根元素字型大小)
<!--此時em也相對於<html>上面的fontSize-->
<div class="box-inner" style="font-size: 1em">
1em字型，相當於20px
</div>
</div>
<!--下面元素設定fontSize對子元素rem不起作用-->
<div class="box-out" style="font-size: 12px">
12px字型
<div class="box-inner" style="font-size: 1rem">
1rem字型，相當於20px
</div>
</div>
</body>
</html>
複製程式碼em，rem 不僅僅是用於控制當前字型的大小，可以應用於各自可以設定長度的屬性上，width、height···
4、百分比 - %
在做頁面佈局時需要知道的幾個點：
- 塊級元素預設寬度
width是100%，預設高度height是0。 - 塊級元素的預設寬度
100%是相對其父元素的寬度，父元素的寬度相對更上一級元素的寬度。
思考：為什麼塊級元素預設高度
height是0而不是100%？
瀏覽器是如何計算高度與寬度的？
Web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。即我們不設定寬，會自動填滿整個橫向寬度。
高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設定一個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。更多相關內容請閱讀 《為啥你的height:100%不起作用？》
5、vw、vh
vh vw全稱為Viewport Height和Viewport Width 意思就是視窗 ,vh、vw是相對於視口的高度和寬度。1vh 等於1/100的視口高度，1vw 等於1/100的視口寬度。
例如：瀏覽器高度900px，寬度為750px, 1 vh = 9 px，1vw = 7.5 px。設定一個和螢幕同寬的標題，h1{font-size:100vw}，那標題的字型大小就會自動根據瀏覽器的寬度進行縮放，以達到字型和viewport大小同步的效果。
6、vmin、vmcx
vmin：vw和vh中較小的那個。 vmax：vw和vh中較大的那個。
例如，如果瀏覽器設定為1100px寬、700px高，1vmin會是7px,1vmax為11px。然而，如果寬度設定為800px，高度設定為1080px，1vmin將會等於8px而1vmax將會是10.8px
7、ex
當前字型的x-height(當前字型小寫x的高度)，在無法確定x高度的情況下以0.5em計算。
8、ch
數字0的寬度，無法確定時為0.5em。
絕對長度單位
絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。絕對長度單位視輸出介質而定，不依賴於環境（顯示器、解析度、作業系統等）。
注：在日常web開發中絕對長度單位的使用場景著實太少，簡單瞭解即可。
1、cm
釐米
2、mm
毫米
3、in（Inch）
英寸
4、pt（Point）
點，確切的說法是一個專用的印刷單位“磅”，大小為1/72英寸。用於印刷業。
5、pc（Pica）
派卡，相當於我國新四號鉛字的尺寸。