CSS所有測量單位

一、絕對長度單位

絕對長度單位是指在不同設備和瀏覽器下都能保持一定的尺寸精度，不會因為設備或者顯示器的分辨率不同而產生變化。

以下是CSS中的幾個絕對長度單位：px、pt、in、cm、mm，其中最常見的是px。

/* 示例 */
div{
  width: 200px;
  height: 50px;
  font-size: 14px;
  padding-left: 10pt;
  margin-left: 0.5in;
}

二、相對長度單位

相對長度單位是相對於其他元素的尺寸進行設置，因此在不同設備和瀏覽器下可能會發生變化。

以下是CSS中的幾個相對長度單位：em、rem、vh、vw、vmin、vmax，其中em和rem最為常見。

1. em單位

em是相對於元素的字體大小進行設置的單位。

/* 示例 */
div{
  font-size: 16px;
  width: 10em;
  line-height: 1.5em;
}

2. rem單位

rem是相對於根元素（即html元素）的字體大小進行設置的單位。使用rem可避免在多個嵌套層級的情況下，字體大小不斷地累計導致布局混亂。

/* 示例 */
html{
  font-size: 16px;
}

div{
  width: 10rem;
  font-size: 1.25rem;
}

三、百分比單位

百分比單位是相對於其他元素的尺寸進行設置的單位，同樣會因為設備的分辨率不同而產生變化。

在實現響應式布局時，經常使用百分比單位來設置寬度、高度等樣式。

/* 示例 */
.container{
  width: 90%;
  margin: 0 auto;
}

img{
  width: 50%;
  height: auto;
}

四、視口相關單位

視口相關單位是相對於設備的屏幕尺寸進行設置的單位，與頁面布局的響應式設計密切相關。

以下是CSS中的幾個視口相關單位：vw、vh、vmin、vmax，其中vw和vh最為常見。

1. vw單位

vw是相對於視口的寬度進行設置的單位，1vw等於視口寬度的1%。

/* 示例 */
div{
  width: 50vw;
}

2. vh單位

vh是相對於視口的高度進行設置的單位，1vh等於視口高度的1%。

/* 示例 */
div{
  height: 50vh;
}

五、計算值

CSS除了以上提到的單位外，還支持基於簡單計算的元素尺寸設置，可以使用“+”、“-”、“*”、“/”等運算符，以及括號進行計算。

/* 示例 */
div{
  width: calc(50% - 20px);
  height: calc(100vh / 3);
}

六、總結

CSS提供各種不同的測量單位，開發者應根據具體情況和需求選擇合適的單位進行樣式設置。絕對長度單位適用於不需要考慮設備分辨率的情況，相對長度單位適用於響應式布局，百分比單位和視口相關單位適用於響應式設計，計算值可使布局更加靈活。