序言
平時在布局中較多使用px和%設置大小或者尺寸，但是在有些場景僅使用這兩個顯然不行，雖然平時使用時僅僅調理出差強人意的效果，沒有細細把控各個屬性的具體內涵。CSS中的尺寸(長度)單位有px、em、rem、%、vw、vh、vm，其中rem、vw、vh、vm(兼容性太差，不講)為CSS3新增內容。CSS3已完全向后兼容，所以你就不必改變現有的設計。瀏覽器將永遠支持CSS2。另外我們需要了解瀏覽器的默認字體高都是16px(也有說14px)，下面會用到，由於1em默認等於瀏覽器默認值14或16px，那么咱們可以用如下代碼測試。
<div style="width: 256px; height: 100px; background: pink;">我寬是16 * 16px</div> <div style="width: 16em; height: 100px; background: red;">我寬是16 * 1em</div> <div style="width: 224px; height: 100px; background: green;">我寬是16 * 14px</div>
執行結果
從結果可以看出你當前瀏覽器默認的字體大小是多少px。我們后面默認瀏覽器的默認字體大小為16px（上方結果是當前瀏覽器渲染的結果，可能16px不是你當前瀏覽器的默認值）。
關於px在瀏覽器中真的就代表一個物理像素么，可以參考這篇文章：傳送門
正文
1、px
單位名稱為像素，相對長度單位，像素（px）是相對於顯示器屏幕分辨率而言的,是我們網頁設計常用的單位，也是基本單位。通過px可以設置固定的布局或者元素大小，缺點是沒有彈性。相對長度單 位，像素（Pixels）
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
CSS長度單位px-CSS大小px詳解，演示代碼如下
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS長度單位px-CSS大小px詳解</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1{margin:10px 0;font-size:16px;} ul{margin:0;padding:0;list-style:none;} li{margin-top:8px;background:#ccc;} .in{width:1in;} .pt{width:72pt;} .pc{width:6pc;} .px{width:96px;} .cm{width:2.54cm;} .mm{width:25.4mm;} </style> </head> <body> <h1>單位轉換對比：</h1> <ul> <li class="in">1in</li> <li class="pt">72pt</li> <li class="pc">6pc</li> <li class="px">96px</li> <li class="cm">2.54cm</li> <li class="mm">25.4mm</li> </ul> <p>1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px</p> </body> </html>
運行結果：
單位轉換對比：
- 1in
- 72pt
- 6pc
- 96px
- 2.54cm
- 25.4mm
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
2、pt
點（Points）。絕對長度單位。頁面開發一般不用，具體的換算關系可以查看同px中列出的公式。下方演示的是1pt大小的文字和div
我的font-size為1PT
我的font-size為10PT
我的font-size為72PT
3、em
Em 相對長度單位，這里em與html <em>標簽的"EM"拼寫完全相同，而這里em作為單獨文本單位。參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
特點
- 1. em的值並不是固定的；
- 2. em會繼承父級元素的字體大小。
演示代碼如下：
<h2>測試em屬性的特點</h2> <div> <p style="color: red">驗證默認</p> <div style="font-size: 1em">父未定義font-size 此為1em字體</div> <div style="font-size: 2em">父未定義font-size 此為2em字體</div> <p style="color: red">驗證比例</p> <div style="font-size: 1em"> <div style="font-size: 1em">當前元素父定義了font-size=1em 此為1em字體</div> <div style="font-size: 2em">當前元素父定義了font-size=1em 此為2em字體</div> </div> <br> <div style="font-size: 2em"> <div style="font-size: 1em">當前元素父定義了font-size=2em 此為1em字體</div> <div style="font-size: 2em">當前元素父定義了font-size=2em 此為2em字體</div> </div> <p style="color: red">驗證繼承</p> <div style="font-size: 2em"> <div> <div style="font-size: 1em">父未定義font-size 此為1em字體</div> <div style="font-size: 2em">父未定義font-size 此為2em字體</div> </div> </div> </div>
執行效果如下：
測試em屬性的特點
驗證默認
驗證比例
驗證繼承
高級操作：任意瀏覽器的默認字體高度16px（16像素）。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。由於em的值具有傳遞性和繼承性，所以在使用的時候務必要留意層次結構。
4、rem
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。如：
p {font-size:14px; font-size:.875rem;}
兼容性：
目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
就算對不支持的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
使用%單位方便使用
css中的body中先全局聲明font-size=62.5%，這里的%的算法和rem一樣。
因為100%=16px，1px=6.25%，所以10px=62.5%，
這是的1rem=10px，所以12px=1.2rem。px與rem的轉換通過10就可以得來，很方便了吧！
使用方法
注意，rem是只相對於根元素htm的font-size，即只需要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比即可；
例子：
/*16px * 312.5% = 50px;*/ html{font-size: 312.5%;} /*50px * 0.5 = 25px;*/ body{ font-size: 0.5rem; font-size\0:25px; }
一般情況下，是這樣子使用的
html{font-size:62.5%;} body{font-size:12px;font-size:1.2rem ;} p{font-size:14px;font-size:1.4rem;}
rem部分參考博文:傳送門
5、%
百分號使用較頻繁的就是width、 height設置標簽的寬高了，此時width:50%相當於父元素寬度的50%，height: 50%相當於父元素高度的50%。當父元素是body時，設置height:50%無效，而寬度widht:50%有效，body高度不確定，網上說高度是0導致的。
代碼案例
HTML
<div class="father"> <div class="son1"> <div class="son2"></div> </div> </div>
CSS
.father{ width: 50%; height: 50%; /*設置高度無效*/ background-color: #0f0; } .son1{ width: 50%; height: 500px; background-color: yellow; } .son2{ width: 50%;/*相當於父元素的寬*/ height: 50%;/*相當於父元素的高*/ background-color: blue; } .father,.son1,.son2{ margin: 0px auto; }
執行結果
margin-top margin-right margin-bottom margin-left:40%中設置百分號都相當於父元素的寬度進行計算大小；同理同樣處於盒子模型中的padding設置百分號時也是相對於父元素的寬度；w3c指出% 規定基於父元素的寬度的百分比的外邊距。
html代碼：
<div class="father"> <div class="son1"> <div class="son2"></div> </div> </div>
css代碼：
.father{ width: 50%; height: 50%; /*設置高度無效*/ background-color: #0f0; } .son1{ width: 50%; height: 500px; background-color: yellow; border-top: 2px solid red; } .son2{ width: 50%;/*相當於父元素的寬*/ height: 50%;/*相當於父元素的高*/ background-color: blue; margin: 40% 40%;/*相當於父元素的寬度*/ /* padding-bottom: 20%;相當於父元素的寬度 } .father,.son1,.son2{ /* margin: 0px auto; */ }
border-raduis設置邊界四個邊界的弧度，共有8個參數來設值四個邊界角的弧度，border-raduis也常用%中設置；此時如border-raduis：50% 50% 50% 50%含義border-top-left: 弧度垂直半徑為該標簽高度的50%，弧度水平半徑為該標簽寬度的50%,border-top-right、border-bottom-right、border-bottom-left同理；故由此知border-raduis中的%號是相當於當前元素的寬高來設置垂直和水平半徑的。利用border-raduis這一屬性，可設置出不同的形狀。如半圓、橢圓、膠囊、環等、圓。
html代碼：
<div class="circle"> </div> <div class="jiaonang"></div> <div class="ring"></div> <div class="halfcircle"></div>
css代碼：
/* border %分號相對於自身的寬做水平半徑 相當於自身的高做垂直半徑 */ /* border 共有8個值 border的角弧線由垂直半徑和水平半徑決定,僅有一個值時垂直半徑和水平半徑相同*/ .circle{ width: 300px; height: 100px; background-color: red; border-radius:50%; /* border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; */ } /* 高的一半 */ .jiaonang{ width: 200px; height:100px; background-color: #00f; border-radius: 50px; } .ring{ width: 100px; height: 100px; /* background-color: #0ff; */ border-radius: 50%; border: 30px solid #0ff; } /* 整個高 */ .halfcircle{ width: 100px; height: 50px; background-color: rgb(178, 224, 224); border-radius: 50px 50px 0px 0px ; }
運行結果：
positon:absolute定位脫離了標准的文檔流(普通流)，是相對最近的一個具有定位的祖先元素進行定位，所以此時設置top、bottom：50%是相對於其定位元素的高度進行計算的，left、right相對於定位元素的寬度計算的；非父元素的寬度或高度進行計算的。而positon：relative是相對於自己進行定位，故此時top、bottom：50%是相對於其父元素的高度進行計算的，left、right相對於父元素的寬度計算的
html代碼：
<div class="abso"> <div class="absoSon"> <div class="absoSon2"></div> </div> </div> <div class="rela"> <div class="relaSon"></div> </div>
css代碼：
.abso{ background-color: #c0c0c0; position: relative; width: 400px; height: 200px; } .absoSon{ width: 50%;/*width：200px height:100px*/ height: 50%; background-color: yellow; } .absoSon2{ width: 50%;/*未設置絕對定位前width 和height%都相當於父元素的寬高進行計算*/ height: 50%;/*width: 200px height: 100px*/ background-color: skyblue; position: absolute; /*設置絕對定位后相對於距離其最近的具有定位的祖先元素進行定位，此時所有的%規則都應相對於定位的祖先元素設置，*/ top: 50%;/*如width height%相對於定位元素的寬高進行設置 top bottom%相當於定位元素的高進行計算 left right%相當於定位元素的寬進行計算*/ left: 50%; /* margin-left: -50%;即200px 相對定位元素的寬度進行設置 */ /* margin-top: -50%; 200px */ } .rela{ border: 3px red solid; background-color: #c0c0c0; width: 400px; height: 200px; } .relaSon{ background-color: yellow; width: 50%; height: 50%; position: relative; top: 50%;/*top bottom 相當於父元素的高進行計算*/ left:50%;/*left right相當於父元素的寬進行計算*/ }
運行結果：
總結使用百分號%:
- width、height、relative：width相對於父元素的寬；height相對於父元素的高進行計算。relative:top、bottom相對父元素的高;left 、right相對於父元素的寬進行計算。
- border-raudis：相對自身標簽的寬高設置每個邊角的垂直和水平半徑。
- margin: left、right、top、bottom相當於父元素的寬度進行
- absolute：top、bottom相對定位元素的高;left 、right相對於定位元素的寬進行計算。同時位於absolute中的其他屬性如width heiht margin等都相當於定位元素進行計算。
- line-hight設置內聯元素垂直居中時,%相對於文本的行高進行計算，非父元素。
%部分參考博文：傳送門
6、vw與vh
視口單位(Viewport units)
什么是視口？
在PC端，視口指的是在PC端，指的是瀏覽器的可視區域；
而在移動端，它涉及3個視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。
視口單位中的“視口”，PC端指的是瀏覽器的可視區域；移動端指的就是Viewport中的Layout Viewport。
根據CSS3規范，視口單位主要包括以下4個：
1.vw：1vw等於視口寬度的1%。
2.vh：1vh等於視口高度的1%。
3.vmin：選取vw和vh中最小的那個。
4.vmax：選取vw和vh中最大的那個。
vh and vw：相對於視口的高度和寬度，而不是父元素的（CSS百分比是相對於包含它的最近的父元素的高度和寬度）。1vh 等於1/100的視口高度，1vw 等於1/100的視口寬度。
比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax。
vmin相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin。
vh/vw與%區別
請看下面簡單的栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VW&VH</title> </head> <style> * { padding: 0; margin: 0 } .left { float: left; width: 50vw; height: 20vh; background-color: blue; text-align: center; line-height: 20vh; font-size: 3rem } .right { float: right; width: 50vw; height: 20vh; background-color: green; text-align: center; line-height: 20vh; font-size: 3rem } </style> <body> <div class="left">left</div> <div class="right">right</div> </body> </html>
兼容性問題(在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持，並且在微信 x5 內核中也得到完美的全面支持)
vw和vh參考博文：傳送門