CSS的尺寸單位有很多種，每種單位都有其適用的場景和用途。下面將詳細介紹常用的CSS尺寸單位，并提供相應的代碼示例。
像素（px）
像素是最常用的尺寸單位之一。它是相對于屏幕的物理像素來進行度量的，具有固定的大小。在書寫CSS樣式時，可以直接使用像素作為寬度、高度、邊框、內外邊距等屬性的值。例如：
div {
width: 200px;
height: 100px;
border: 1px solid #000;
padding: 10px;
margin: 20px;
}
登錄后復制
百分比（%）
百分比是相對于父元素的尺寸來進行度量的單位。它可以用于寬度、高度、內外邊距、邊框等屬性上。通過設置百分比，可以實現響應式布局。例如：
div {
width: 50%;
height: 50%;
}
登錄后復制
em
em是相對于當前元素的字體大小來進行度量的單位。如果沒有明確設置字體大小，則em單位的大小等于父元素的字體大小。它可以用于寬度、高度、內外邊距、邊框等屬性上。例如：
div {
width: 2em;
height: 2em;
padding: 1em;
border: 0.5em solid #000;
}
登錄后復制
rem
rem是相對于根元素（即html元素）的字體大小來進行度量的單位。它可以用于寬度、高度、內外邊距、邊框等屬性上。通過設置根元素的字體大小，可以實現全局的尺寸控制。例如：
html {
font-size: 16px; /* 設置根元素的字體大小為16px */
}
div {
width: 20rem;
height: 10rem;
padding: 4rem;
border: 2rem solid #000;
}
登錄后復制
vw和vh
vw是視口寬度的百分比，vh是視口高度的百分比。它們是相對于瀏覽器視口的尺寸來進行度量的單位。它們可以用于寬度、高度等屬性上。通過設置vw和vh，可以實現響應式布局。例如：
div {
width: 50vw; /* 視口寬度的50% */
height: 50vh; /* 視口高度的50% */
}
登錄后復制
總結：
本文介紹了CSS常用的尺寸單位，包括像素、百分比、em、rem、vw和vh。合理選擇和使用尺寸單位可以使網頁具有良好的適應性和響應性。在實際開發中，根據具體的需求和場景選擇合適的單位進行設置，可以使頁面的布局更加靈活和美觀。
