摘要：css3中常見的單位：1. px：絕對單位，頁面按精確像素展示2. em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算(瀏覽器默認字體是16px)，整個頁面內1em不是一個固定的值...

css3中常見的單位：

1. px：絕對單位，頁面按精確像素展示

2. em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算(瀏覽器默認字體是16px)，整個頁面內1em不是一個固定的值。

3. rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

4. vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。

5. vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。

6. vmin：vw和vh中較小的那個。

7. vmax：vw和vh中較大的那個。

8. %:百分比

9.in:寸

10.cm:厘米

11.mm:毫米

12.pt:point，大約1/72寸

13.pc:pica，大約6pt，1/6寸

14.ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加么有前綴)

15.ch:以節點所使用字體中的“0”字符為基準，找不到時為0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

其中用的最多的單位是px、em、rem，這三個的區別是：

px是固定的像素，一旦設置了就無法因為適應頁面大小而改變。

em和rem相對于px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用于響應式布局。

對于em和rem的區別一句話概括：em相對于父元素，rem相對于根元素。

rem中的r意思是root(根源)，這也就不難理解了。

瀏覽器的默認的font-size是16px，1rem默認就等于16px。(chrome最小字體為12px)

設置的font-size來改變rem尺寸：html{

font-size:?20px

}

.box{

font-size:?1rem;

width:20rem;

height:10rem;

background-color:purple;

}

em/rem：用于做響應式頁面，不過我更傾向于rem，因為em不同元素的參照物不一樣(都是該元素父元素)，所以在計算的時候不方便，相比之下rem就只有一個參照物(html元素)，這樣計算起來更清晰。

關于vh/vw與%區別：

vh和vw大小是相對于視口的高度和寬度，而不是父元素的，%單位是相對于包含它的最近的父元素的高度和寬度。

總結

以上是生活随笔為你收集整理的学完css3的总结,css3中常见的单位及总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。