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 與 rem

em 機關的值等于基本元素或父元素的字型大小。

例如，如果父元素的字型大小為16px，則所有直接子元素中的1em值将計算為16px。基于基本單元的知識，可以很友善的增大或減小子元素的字型大小。 這裡的值不需要是整數。

使用em可以輕松地将各種元素的字型大小保持在固定比例。

例如，如果父元素的font-size的值為50px，則将子元素的字型大小設定為2em, 相當于設定為100px。 類似的，将它設定為0.5em将使得子元素的字型大小為25px。

另外有一點需要注意：如果想要通過 em 設定目前元素的大小值，并且不是相對于直接父元素，而是相對父元素的父元素或者根元素，就會變得很複雜，因為每一層都要進行計算

例如:

<div class="parent">
    <div class="child1">
        <div class="child2"></div>
    </div>
</div>

.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 也是一個相對機關，與 em 的不同點在于rem的長度總是相對于根元素, 而不是像 em 使用級聯的方式來計算尺寸。這種機關使用起來就簡單很多

同樣是上面的例子，不過使用的機關是 rem

<div class="parent">
    <div class="child1">
        <div class="child2"></div>
    </div>
</div>

.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5rem;
}

.child2 {
    font-size: 1.2rem;
}      

​16 x 1.5 = 24px​

​16 x 1.2 = 19.2px​

​ ; 這裡為什麼是使用 16 來乘而不是 20 呢？這就是因為rem的長度總是相對于根元素, 就是指 html, 而 html文檔中預設字型大小為 16px, 是以這裡使用 16來計算

可視區相對長度機關

可視區相對長度 基于 視圖視窗或視口(螢幕上的可視區域或者架構)的寬度和高度。

可視區高度機關（vh）和可視區寬度機關（vw）

vh機關與可視區的高度相關。vh的值等于可視區高度的1/100。如果我們要根據浏覽器視窗的高度來調整元素，這個機關是有用的。 例如，如果可視區的高度是400px，則1vh等于4px。 如果可視區高度為800px，則1vh等于8px。

類似的，vw機關與可視區的寬度相關。 是以可以推算1vw的值。 1vw就等于可視區寬度的1/100。 例如，如果視窗的寬度為1200px，則1vw将為12px。

vmin 和 vmax

vmin 是目前 vm 和 vh 中較小的一個值，也就是說，是可視區域較小的一邊的1/100的長度； 例如：可視區大小為 1000x800, 則 wmin = 800/100 = 8px; 如果可視區大小為 600x800, 則 wmin = 600/100 = 6px;

百分比表示的長度