px - 像素

px 是 CSS 中最常用的長(zhǎng)度單位，可以用來(lái)指定字體大小，元素的寬度、高度、邊框、內(nèi)邊距，外邊距的大小等等, 它是一個(gè)虛擬長(zhǎng)度單位，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果px要換算成物理長(zhǎng)度，需要指定精度DPI

px 單位的值必須是整數(shù)值

與px相關(guān)的一些單位

in - 表示英寸，是一個(gè)物理單位，在CSS中被直接映射成為px; 轉(zhuǎn)換的方法是 1in = 96px

cm - 表示厘米，在生活中常用的單位，同樣被映射為 px; 轉(zhuǎn)換方法為 1cm = 37.8px

mm - 表示毫米，與cm類似，轉(zhuǎn)換方法為 1mm = 0.1cm = 3.78px

em 與 rem

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

例如，如果父元素的字體大小為16px，則所有直接子元素中的1em值將計(jì)算為16px。基于基本單元的知識(shí)，可以很方便的增大或減小子元素的字體大小。 這里的值不需要是整數(shù)。

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

例如，如果父元素的font-size的值為50px，則將子元素的字體大小設(shè)置為2em, 相當(dāng)于設(shè)置為100px。 類似的，將它設(shè)置為0.5em將使得子元素的字體大小為25px。

另外有一點(diǎn)需要注意：如果想要通過(guò) em 設(shè)置當(dāng)前元素的大小值，并且不是相對(duì)于直接父元素，而是相對(duì)父元素的父元素或者根元素，就會(huì)變得很復(fù)雜，因?yàn)槊恳粚佣家M(jìn)行計(jì)算

例如:

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

那么就需要經(jīng)過(guò)計(jì)算: child1的字體大小為 20 x 1.5 = 30px, 而 child2 的字體大小就等于 20 x 1.5 x 1.2 = 36px

rem 也是一個(gè)相對(duì)單位，與 em 的不同點(diǎn)在于rem的長(zhǎng)度總是相對(duì)于根元素, 而不是像 em 使用級(jí)聯(lián)的方式來(lái)計(jì)算尺寸。這種單位使用起來(lái)就簡(jiǎn)單很多

同樣是上面的例子，不過(guò)使用的單位是 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; }

那么就需要經(jīng)過(guò)計(jì)算: child1的字體大小為 16 x 1.5 = 24px, 而 child2 的字體大小就等于 16 x 1.2 = 19.2px; 這里為什么是使用 16 來(lái)乘而不是 20 呢？這就是因?yàn)閞em的長(zhǎng)度總是相對(duì)于根元素, 就是指 html, 而 html文檔中默認(rèn)字體大小為 16px, 因此這里使用 16來(lái)計(jì)算

可視區(qū)相對(duì)長(zhǎng)度單位

可視區(qū)相對(duì)長(zhǎng)度 基于 視圖窗口或視口(屏幕上的可視區(qū)域或者框架)的寬度和高度。

可視區(qū)高度單位（vh）和可視區(qū)寬度單位（vw）

vh單位與可視區(qū)的高度相關(guān)。vh的值等于可視區(qū)高度的1/100。如果我們要根據(jù)瀏覽器窗口的高度來(lái)調(diào)整元素，這個(gè)單位是有用的。 例如，如果可視區(qū)的高度是400px，則1vh等于4px。 如果可視區(qū)高度為800px，則1vh等于8px。

類似的，vw單位與可視區(qū)的寬度相關(guān)。 因此可以推算1vw的值。 1vw就等于可視區(qū)寬度的1/100。 例如，如果窗口的寬度為1200px，則1vw將為12px。

vmin 和 vmax

vmin 是當(dāng)前 vm 和 vh 中較小的一個(gè)值，也就是說(shuō)，是可視區(qū)域較小的一邊的1/100的長(zhǎng)度； 例如：可視區(qū)大小為 1000x800, 則 wmin = 800/100 = 8px; 如果可視區(qū)大小為 600x800, 則 wmin = 600/100 = 6px;

類似的, wmax 是當(dāng)前 vm 和 vh 中較大的一個(gè)值，也就是說(shuō)，是可視區(qū)域較大的一邊的1/100的長(zhǎng)度； 例如：可視區(qū)大小為 1000x800, 則 wmin = 1000/100 = 10px; 如果可視區(qū)大小為 600x800, 則 wmin = 800/100 = 8px;

百分比表示的長(zhǎng)度

以百分比為單位的長(zhǎng)度值是基于具有相同屬性的父元素的長(zhǎng)度值。因此會(huì)隨著父元素對(duì)應(yīng)的長(zhǎng)度值得變化而變化。例如：設(shè)置父元素的寬度為 100px, 設(shè)置直接子元素的寬度為 50%，則子元素的寬度為 50px;

總結(jié)

以上是生活随笔為你收集整理的CSS中常见的长度单位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。