css相對單位有哪些

CSS相對單位有很多，常見的有像素（px），百分比（%），em（em），和rem（rem）。以下將分別介紹這四種相對單位，並給出具體的程式碼範例。

1. 像素（px）：
   像素是相對於螢幕解析度的單位，它的值是固定的，不會根據使用者的設定而改變。例如，如果你將元素的寬度設為100px，那麼它的寬度就會保持在100個像素。

程式碼範例：

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

2. 百分比（%）：
   百分比是相對於父元素的單位，它的值會根據父元素的大小而改變。也就是說，百分比單位可以根據螢幕尺寸的變化而自動調整元素的大小。例如，如果父元素的寬度是200px，而你將子元素的寬度設定為50%，那麼子元素就會佔據父元素寬度的一半。

程式碼範例：

.parent {
  width: 200px;
}

.child {
  width: 50%;
  height: 50px;
}

3. em（em）：
   em是相對於元素本身字體大小的單位。例如，如果一個元素的字體大小為16px，那麼1em就等於16px，2em就等於32px，以此類推。 em單位可以方便地實現字體大小的相對調整。

程式碼範例：

p {
  font-size: 16px;
}

span {
  font-size: 1.5em; /* 相当于24px */
}

4. rem（rem）：
   rem與em類似，不過它是相對於根元素（一般指html元素）的字體大小。 rem單位可以在整個頁面中統一控製字體大小，同時又能實現相對調整。

程式碼範例：

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

總結：
CSS中的相對單位有像素（px），百分比（%），em（em），和rem（rem） 。像素單位是固定的，不會根據使用者的設定而改變。百分比單位是相對於父元素的大小而改變。 em單位是相對於元素本身字體大小的單位，而rem單位是相對於根元素的字體大小的單位。在實際應用中，我們可以根據需要選擇合適的相對單位來控制元素的大小和字體的大小。

以上是css相對單位有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！