常見的CSS高度和寬度單位有哪些？

一、像素（Pixel）

像素是最常見的CSS高度和寬度單位之一，也是最基礎的單位之一。像素是屏幕上最小的物理點，通常用來描述屏幕上的圖像的解析度。在CSS中，像素被用來精確地設置元素的大小。

    .box {
        width: 200px; /* 使用像素設置元素的寬度為200個像素 */
        height: 100px; /* 使用像素設置元素的高度為100個像素 */
    }

使用像素設置元素的大小可以精確地控制元素的大小，但是需要注意的是，使用像素設置元素大小可以導致在高解析度的屏幕上顯示得太小，同時在低解析度的屏幕上顯示得太大。

二、百分比（Percentage）

百分比是另一個常見的CSS高度和寬度單位。當使用百分比設置元素的大小時，元素的大小相對於其包含塊（父元素）的大小來計算。因此，百分比在響應式設計時非常有用。

    .parent {
        width: 500px;
        height: 200px;
    }
    .child {
        width: 50%; /* 子元素的寬度是父元素寬度的一半 */
        height: 50%; /* 子元素的高度是父元素高度的一半 */
    }

使用百分比設置元素大小可以使元素在不同的屏幕大小下自適應，並且可以充分利用父元素的大小，不會造成浪費。但是需要注意的是，百分比計算可能會受到盒模型和padding、border、margin等因素的影響，需要根據具體情況進行處理。

三、視區單位（Viewport Units）

視區單位是相對於瀏覽器視口大小的CSS單位。視口坐標如下圖所示：

       +---------> X axis
       |
       |
       |
       V
       Y axis

其中X軸和Y軸的起點都是瀏覽器窗口的左上角，可以使用vw和vh表示相對於視口的寬度和高度。此外，還可以使用vmax和vmin分別表示同一維度的最大和最小值，例如手機瀏覽器豎屏使用vmin，橫屏使用vmax。

    .box {
        width: 50vw; /* 元素寬度為視口寬度的50% */
        height: 50vh; /* 元素高度為視口高度的50% */
    }

視區單位可以使元素在不同的屏幕大小下自適應，並且能夠直接使用視口大小進行計算，非常方便。但是需要注意的是，視口大小不包括瀏覽器工具欄和滾動條，需要根據具體情況進行調整。

四、EM和REM

EM和REM是相對單位，它們的值不是固定的，而是相對於父元素或根元素的字體大小進行計算。其中，EM是相對於父元素的字體大小進行計算的，而REM是相對於根元素（通常是HTML元素）的字體大小進行計算的。

    .parent {
        font-size: 18px;
    }
    .child {
        width: 20em; /* 元素寬度為父元素字體大小的20倍 */
        height: 10em; /* 元素高度為父元素字體大小的10倍 */
    }

EM和REM可以使元素的大小根據字體大小而發生變化，非常適合需要根據用戶設置的字體大小進行調整的設計。但是需要注意的是，使用EM和REM進行設置大小需要考慮到父元素和根元素的字體大小，需要進行相應的計算。

五、自適應單位（Flexible Units）

自適應單位是指不固定單位，它們的值根據不同的屏幕大小和解析度進行自適應調整。常見的自適應單位包括：

• em，設置字體大小為相對單位，同時也可用於寬、高、邊框和 margin、padding 間距等
• rem，與em類似，不過是相對root html字體大小
• vm, vh ，設置元素高度和寬度為視口單位
• Ch，根據0的width得到
• ex，相當於小寫字母x的高度
• vw，寬度是相對於視口，即瀏覽器可視區域的寬度的1/100
• vh，高度是相對於視口的高度的1/100
• vmin,寬度和高度是相對於vw和vh兩者中較小的那個。
• vmax,寬度和高度是相對於vw和vh兩者中較大的那個
• Rem在層級結構中只相對於根元素，所以可以被認為是唯一的相對寬度測量單位
• Em作為相對單位，為s、px等固定寬度單位設計了伸縮性，可用於各種寬度定義

總結

在CSS中，常用的高度和寬度單位包括像素、百分比、視區單位、EM和REM以及自適應單位。根據具體情況來可視情況選擇適當的單位。同時，較多的開發人員同時混雜使用百分比和像素值，以便更好的熟悉它們之間的差異並減少錯誤的發生。因此，正確地選擇CSS高度和寬度單位顯得尤為重要，它不僅可以在不同的屏幕大小下保持元素的正確比例，而且還可以使設計的頁面自適應，並且能夠適應不同的屏幕大小。