為一個小前端，最基本的布局應該已經是手到擒來的事情，但是在布局過程中，你是不是經常就使用px、%或者rem？其他的呢？你是否又熟悉？

下面就為同學們說一下css中可能會遇到的單位。

首先就從熟悉的開始：

第一種：px

px（像素）是CSS中最為常用的一種單位，傳統上一個像素對應計算機屏幕上的一個點，對于高清屏則對應更多。

第二種：%

百分比也較為常用。其中對font-size設置百分比值時，是以瀏覽器默認字體大小16px為參照計算的。

第三種：em

em是一種計算方式為相對于父元素的字體大小的單位，1em等于父元素設置的字體大小，如果父元素沒有設置字體大小，則繼續往父元素查找，直到有設置大小的，若都沒有設置大小，則使用瀏覽器默認大小。

CSS中常用屬性里使用em這樣計算方式的屬性有：

• border

• width

• height

• padding

• margin

• line-height

第四種：rem:

別看rem和em只有一個字母區別，而且也都是相對單位，其他兩個是完全不一樣的單位概念；rem的參照物是根元素HTML的font-size，因此，如果改變HTML的font-size值，那么所有使用的rem單位大小都會隨著改變，適用于移動端。（ps：不支持IE8以下,而且在移動端使用，如果代碼冗余，容易看到文字會變大或者變小哦，所以使用的時候一定要處理好。）

第五種：v系單位

v系單位常用于移動端，是基于瀏覽器用來顯示內容的區域大小，也就是視窗大小來就算的。

具體分為4個：

• vw：基于視窗的寬度計算，1vw等于視窗寬度的百分之一

• vh：基于視窗的高度計算，1vh等于視窗高度的百分之一

• vmin：基于vw和vh中最小值來計算，1vmin等于最小值的百分之一

• vmax：基于vw和vh中最大值來計算，1vmax等于最大值的百分之一

這類標簽至少我很少使用，所以也不能給同學們建議啦，不過至少以后看到了不用驚訝這個是啥昵

最后單位運算

CSS中可以使用CSS函數calc()來通過計算確定一個屬性的值。

際開發中，喜歡用百分比但是發現自己對百分比掌握的不夠，經常會出現一些出乎意料的效果，今天整理了CSS中有關百分比單位知識，如果對你有幫助的話請多多支持下小編哈！

效果：

要想理解百分比這樣的相對單位，首先要做的事就是找到某個元素的參照物，比如絕對定位的位置參照是已有定位（相對于 static 定位以外的第一個父元素進行定位）,下面我們通過參考物的分類來詳細說明css中的百分比應用。

1.相對于參考物寬度的：A.[max/min-]widthB.paddingC.marginD.left(有定位情況)E.right（有定位情況）

效果：

寫這個例子的時候突然想試試border能不能用百分比，意料之中，不行。這里的.son元素的參考物是.parent1,而不是離她最近的.parent2。

要成為一名合格的前端工程師，會寫頁面絕對不能少，而如果想要頁面寫得出彩，你必須要知道一些網頁常用的基本單位。

在傳統的項目開發中，我們常常會用到px、%、em這幾個單位，因為它能適用于大部分的項目開發，而且擁有比較良好的兼容性。但素，你造嗎？從CSS3開始，瀏覽器對邏輯單位的支持又提升到了另外一個境界，增加了rem、vw、vh、vm等一些新的長度單位，我們可以用這些新的單位開發出比較良好的響應式頁面，以此可以覆蓋多種不同分辨率的設備，包括移動設備等。

那么，接下來我們分別來分析下，這些常用到的單位分別是什么。

1．px

px就是pixel的縮寫，像素，相對長度單位，像素是相對于顯示器屏幕分辨率而言。比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。再比如，px就可以認為是一張圖片最小的一個點，一張位圖就是千千萬萬的這樣的點構成的。

2.em

相對長度單位，參考對象是父元素的font-size，具有繼承的特點，如果當前行內文本的字體尺寸未被設置，瀏覽器使用默認字體尺寸（16px），整個頁面內1em也不是一個固定的值。

3.%

一般寬泛的講是相對于父元素，但是并不是絕對的。

1）、對于普通元素就是我們理解的相對于父元素

2）、對于position: absolute;的元素是相對于已定位的父元素

3）、對于position: fixed;的元素是相對于ViewPort（可視窗口）

4.rem

rem是css3的新單位，相對于根元素html（網頁）的font-size，不會像em那樣，依賴于父元素的字體大小，而造成混亂。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

例如：

p{font-size:14px;?font-size:.875rem;}

但是，需要注意的是：

選擇使用什么字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時使用。一般rem用在移動端可能更多些。

5.vw

vw是css3新單位，viewpoint width的縮寫，即視口寬度。何謂視口，就是根據你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現在那么多不同電腦有關分辨率的自適應問題。視口寬度被均分為100單位的vw，1vw等于視窗寬度的1%。

舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一樣的是，vw始終相對于可視窗口的寬度，而百分比和其父元素的寬度有關。

6.vh

與vw類似，vh就是可視窗口的高度了。視口高度被均分為100單位的vh，1vh就是高度的1%。看下圖：

7.vm

vm也是css3新單位，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm。

舉個栗子：瀏覽器高度800px，寬度1000px，取最小的瀏覽器高度，1 vm = 800px/100 = 8 px。

由于現在vm的兼容性較差，現在基本上很少有人用。

除了上述7種單位，css還有哪些長度單位？

例如：

in 寸

cm 厘米

mm 毫米

pt point磅，大約1/72寸

pc pica派卡，大約6pt，1/6寸

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px