px 是 css 中最常用的長度單位，可以用來指定字型大小，元素的寬度、高度、邊框、內邊距，外邊距的大小等等, 它是乙個虛擬長度單位，是計算機系統的數位化影象長度單位，如果px要換算成物理長度，需要指定精度dpi
px 單位的值必須是整數值
in - 表示英吋，是乙個物理單位，在css中被直接對映成為px; 轉換的方法是1in = 96px
cm - 表示厘公尺，在生活中常用的單位，同樣被對映為 px; 轉換方法為1cm = 37.8px
mm - 表示公釐，與cm類似，轉換方法為1mm = 0.1cm = 3.78px
em 單位的值等於基本元素或父元素的字型大小。
例如，如果父元素的字型大小為16px，則所有直接子元素中的1em值將計算為16px。基於基本單元的知識，可以很方便的增大或減小子元素的字型大小。 這裡的值不需要是整數。
使用em可以輕鬆地將各種元素的字型大小保持在固定比例。
例如，如果父元素的font-size的值為50px，則將子元素的字型大小設定為2em, 相當於設定為100px。 類似的，將它設定為0.5em將使得子元素的字型大小為25px。
另外有一點需要注意：如果想要通過 em 設定當前元素的大小值，並且不是相對於直接父元素，而是相對父元素的父元素或者根元素，就會變得很複雜，因為每一層都要進行計算
例如:
.parent
.child1
.child2
20 x 1.5 = 30px, 而 child2 的字型大小就等於20 x 1.5 x 1.2 = 36px
rem 也是乙個相對單位，與 em 的不同點在於rem的長度總是相對於根元素, 而不是像 em 使用級聯的方式來計算尺寸。這種單位使用起來就簡單很多
同樣是上面的例子，不過使用的單位是 rem
.parent
.child1
.child2
16 x 1.5 = 24px, 而 child2 的字型大小就等於16 x 1.2 = 19.2px; 這裡為什麼是使用 16 來乘而不是 20 呢？這就是因為rem的長度總是相對於根元素, 就是指 html, 而 html文件中預設字型大小為 16px, 因此這裡使用 16來計算
可視區相對長度 基於 檢視視窗或視口(螢幕上的可視區域或者框架)的寬度和高度。
vh單位與可視區的高度相關。vh的值等於可視區高度的1/100。如果我們要根據瀏覽器視窗的高度來調整元素，這個單位是有用的。 例如，如果可視區的高度是400px，則1vh等於4px。 如果可視區高度為800px，則1vh等於8px。
類似的，vw單位與可視區的寬度相關。 因此可以推算1vw的值。 1vw就等於可視區寬度的1/100。 例如，如果視窗的寬度為1200px，則1vw將為12px。
vmin 是當前 vm 和 vh 中較小的乙個值，也就是說，是可視區域較小的一邊的1/100的長度； 例如：可視區大小為 1000x800, 則 wmin = 800/100 = 8px; 如果可視區大小為 600x800, 則 wmin = 600/100 = 6px;
類似的, wmax 是當前 vm 和 vh 中較大的乙個值，也就是說，是可視區域較大的一邊的1/100的長度； 例如：可視區大小為 1000x800, 則 wmin = 1000/100 = 10px; 如果可視區大小為 600x800, 則 wmin = 800/100 = 8px;
以百分比為單位的長度值是基於具有相同屬性的父元素的長度值。因此會隨著父元素對應的長度值得變化而變化。例如：設定父元素的寬度為 100px, 設定直接子元素的寬度為 50%，則子元素的寬度為 50px;
CSS中常見的長度單位
px 是 css 中最常用的長度單位，可以用來指定字型大小，元素的寬度 高度 邊框 內邊距，外邊距的大小等等,它是乙個虛擬長度單位，是計算機系統的數位化影象長度單位，如果px要換算成物理長度，需要指定精度dpi px 單位的值必須是整數值 in 表示英吋，是乙個物理單位，在css中被直接對映成為px...
css 長度單位
畫素 螢幕 顯示器 實際上是由乙個乙個的小點點構成的 不同螢幕的畫素大小是不同的，畫素越小的螢幕顯示的效果越清晰 所以同樣的200px在不同的裝置下顯示效果不一樣 百分比 也可以將屬性值設定為相對於其父元素屬性的百分比 設定百分比可以使子元素跟隨父元素的改變而改變 doctype html en u...
CSS的長度單位
css相對長度單位中的相對二字，表明了其長度單位會隨著它的參考值的變化而變化，不是固定的。以下是css相對長度單位列表 css相對長度單位 說明em 元素的字型高度the height of the element s font ex字母x的高度the height of the letter x ...