CSS中常見的長度單位

時間 2019-11-15

標籤 css 常見的長度單位欄目 CSS 简体版

原文原文鏈接

px - 像素

px 是 CSS 中最經常使用的長度單位，能夠用來指定字體大小，元素的寬度、高度、邊框、內邊距，外邊距的大小等等, 它是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPIcss

px 單位的值必須是整數值html

與px相關的一些單位

in - 表示英寸，是一個物理單位，在CSS中被直接映射成爲px; 轉換的方法是 1in = 96px瀏覽器

cm - 表示釐米，在生活中經常使用的單位，一樣被映射爲 px; 轉換方法爲 1cm = 37.8px框架

mm - 表示毫米，與cm相似，轉換方法爲 1mm = 0.1cm = 3.78px字體

em 與 rem

em 單位的值等於基本元素或父元素的字體大小。 code

例如，若是父元素的字體大小爲16px，則全部直接子元素中的1em值將計算爲16px。基於基本單元的知識，能夠很方便的增大或減少子元素的字體大小。這裏的值不須要是整數。htm

使用em能夠輕鬆地將各類元素的字體大小保持在固定比例。 rem

例如，若是父元素的font-size的值爲50px，則將子元素的字體大小設置爲2em, 至關於設置爲100px。相似的，將它設置爲0.5em將使得子元素的字體大小爲25px。文檔

另外有一點須要注意：若是想要經過 em 設置當前元素的大小值，而且不是相對於直接父元素，而是相對父元素的父元素或者根元素，就會變得很複雜，由於每一層都要進行計算class

例如:

<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;
}

那麼就須要通過計算: child1的字體大小爲 16 x 1.5 = 24px, 而 child2 的字體大小就等於 16 x 1.2 = 19.2px; 這裏爲何是使用 16 來乘而不是 20 呢？這就是由於rem的長度老是相對於根元素, 就是指 html, 而 html文檔中默認字體大小爲 16px, 所以這裏使用 16來計算