CSS中的單位有很多種，這些單位的使用可以讓我們更好地掌控樣式表與頁面元素的關(guān)系。

下面我們來一一介紹。

px

px是CSS中最常用的單位之一，表示像素。它是相對(duì)于顯示器屏幕分辨率而言的，在不同的設(shè)備上顯示效果可能有所差異。

例如：

div{ 
width: 100px; 
height: 200px; 
}

em

em是相對(duì)單位，它是基于父元素的字體大小而言的，即相當(dāng)于當(dāng)前元素所在字體大小的倍數(shù)。

例如：

p{ 
font-size: 14px; 
}

span{ 
font-size: 1.5em; 
}

上面的代碼中，span元素的字體大小即為14px*1.5=21px。

rem

rem也是相對(duì)單位，不同于em，它是基于根元素（即html元素）的字體大小而言的。

例如：

html{ 
font-size: 16px; 
}

p{ 
font-size: 1.5rem; 
}

上面的代碼中，p元素的字體大小為16px*1.5=24px。

%

%表示百分比，它是相對(duì)于父元素的大小而言的。

例如：

div{ 
width: 50%; 
height: 50%; 
}

上面的代碼中，div元素的寬度和高度均為父元素的一半。

vh/vw

vh/vw是視窗（viewport）單位，它們是相對(duì)于當(dāng)前視窗的寬度和高度而言的。1vh即為視窗高度的1%，1vw即為視窗寬度的1%。

例如：

div{ 
width: 50vw; 
height: 50vh; 
}

上面的代碼中，div元素的寬度和高度分別為視窗寬度和高度的一半。

pt

pt是印刷單位，它是基于72ppi的像素密度而言的。

例如：

p{ 
font-size: 12pt; 
}

上面的代碼中，p元素的字體大小為12/72=0.17inch。

cm/mm/in/pc

這幾個(gè)單位同樣是印刷單位，cm表示厘米，mm表示毫米，in表示英寸，pc表示pica。它們都是基于物理尺寸而言的。

例如：

p{ 
width: 5cm; 
height: 3in; 
}

上面的代碼中，p元素的寬度為5厘米，高度為3英寸。

綜上所述，CSS中的單位有很多種，它們可以讓我們更好地控制頁面元素的大小與字體大小等屬性，合理使用不同的單位可以讓我們的網(wǎng)頁更加美觀與統(tǒng)一。