css的常用長度機關有哪些？下面本篇文章就來給大家介紹一下CSS常用長度機關。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
px(像素)
px 是 CSS 中最常用的長度機關，可以用來指定字型大小，元素的寬度、高度、邊框、内邊距，外邊距的大小等等, 它是一個虛拟長度機關，是計算機系統的數字化圖像長度機關，如果px要換算成實體長度，需要指定精度DPI
px 機關的值必須是整數值
與px相關的一些機關
in - 表示英寸，是一個實體機關，在CSS中被直接映射成為px; 轉換的方法是 1in = 96px
cm - 表示厘米，在生活中常用的機關，同樣被映射為 px; 轉換方法為 1cm = 37.8px
mm - 表示毫米，與cm類似，轉換方法為 1mm = 0.1cm = 3.78px
百分比%
常見 相對長度機關，相對于父元素的尺寸的取值，實際使用中，如果父元素是一個非穩定的取值，可能會導緻父元素被撐開，而實際值取決于其祖先元素中最近的一個擁有穩定取值的元素。整數取值，并不适用于解決自适應問題。
em
常見 相對長度機關，取決于目标元素字型尺寸。
em 機關的值等于基本元素或父元素的字型大小。
例如，如果父元素的字型大小為16px，則所有直接子元素中的1em值将計算為16px。基于基本單元的知識，可以很友善的增大或減小子元素的字型大小。 這裡的值不需要是整數。
使用em可以輕松地将各種元素的字型大小保持在固定比例。
例如，如果父元素的font-size的值為50px，則将子元素的字型大小設定為2em, 相當于設定為100px。 類似的，将它設定為0.5em将使得子元素的字型大小為25px。
另外有一點需要注意：如果想要通過 em 設定目前元素的大小值，并且不是相對于直接父元素，而是相對父元素的父元素或者根元素，就會變得很複雜，因為每一層都要進行計算
例如:
.parent {
font-size: 20px;
}
.child1 {
font-size: 1.5em;
}
.child2 {
font-size: 1.2em;
}
那麼就需要經過計算: child1的字型大小為 20 x 1.5 = 30px , 而 child2 的字型大小就等于 20 x 1.5 x 1.2 = 36px
rem
CSS3中加入的 相對長度機關，取決于文檔根元素(通常為:root)的字型尺寸，适用于依據字型尺寸進行的排版，适用于自适應。
rem 也是一個相對機關，與 em 的不同點在于rem的長度總是相對于根元素, 而不是像 em 使用級聯的方式來計算尺寸。這種機關使用起來就簡單很多
同樣是上面的例子，不過使用的機關是 rem
.parent {
font-size: 20px;
}
.child1 {
font-size: 1.5rem;
}
.child2 {
font-size: 1.2rem;
}
那麼就需要經過計算: child1的字型大小為 16 x 1.5 = 24px , 而 child2 的字型大小就等于 16 x 1.2 = 19.2px ; 這裡為什麼是使用 16 來乘而不是 20 呢？這就是因為rem的長度總是相對于根元素, 就是指 html, 而 html文檔中預設字型大小為 16px, 是以這裡使用 16來計算
vw和vh
CSS3中加入的 相對長度機關，取決于浏覽器視窗的寬(高)，1vw 即為浏覽器視窗寬度的1/100，适用于依據螢幕寬或高進行的排版，适用于自适應。
vmin和vmax
CSS3中加入的 相對長度機關，取決于浏覽器視窗的寬或高中最小(最大)尺寸的軸，适用于依據螢幕最值寬或高進行的排版，适用于自适應。
pt (點)
絕對長度機關，多用于字型尺寸，1px = 0.75pt。
附：
絕對長度機關換算公式： 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px