1.第一種常用單位 px
1.1什么是像素？（pixel）
在前端開發(fā)中舀武，視口的水平方向和豎直方向是有很多個小方格組成的蓬坡。每個小方格就是一個像素。如果說一個電腦的分辨率為2560*1080,表示在其水平方向有 2560 個像素點片迅，豎直方向有 1080 個像素點残邀。最終該電腦屏幕就是由這些像素點組成的矩陣。
所以我們通常以 PX 表示像素。例如： width： 300px芥挣；height：200px驱闷；表示該元素在其父元素所產(chǎn)生的坐標系中占據(jù) 300*200 個像素。
2.第二個常用單位：百分比
百分比在前端開發(fā)中是一個動態(tài)單位，永遠以當前元素的父元素作為參考進行計算。
比如一個元素的 width：20%悬包；height：30%梅誓；該元素的最終大小取決于父元素的大小。
百分比的特點：
1.子元素的高度參考父元素的高度計算奈梳；
2.子元素的寬度參考父元素的寬度計算；
3.父元素大小產(chǎn)生改變時適用了百分比計算大小的子元素與父元素的相對大小保持不變，也就是說父元素變大子元素也變大循榆，父元素變小，子元素也變小畅厢。
3.第三個單位： em 和 rem
em即 element 的縮寫冯痢，此單詞是一個動態(tài)單位，他是依托于元素的字體大小變化的框杜。如果一個元素的字體大小設(shè)置為 12px浦楣，那么此時 1em=12px。
em 會繼承父元素的字體大小
reｍ 即：root element 的縮寫咪辱，也就是一個動態(tài)單位振劳。它是依托于根元素所設(shè)置的字體大小來變化的。如果根元素的字體大小為 20px油狂，那么 1rem=20px历恐。如果該元素的字體大小為12px ，并不影響 1rem 的最終大小专筷。
rem只根據(jù)根元素的大小變化
4.第四個常用單位為 vw 弱贼，vh
v 代表 viewport，即視口磷蛹，應(yīng)用程序或者瀏覽器窗口
vw： viewport width吮旅；視口寬度百分比
vh： viewport height；視口高度百分比
系統(tǒng)會將視口寬度和高度分成 100 份味咳，那么 1vw 表示視口寬度的 1%庇勃，1vh表示視口高度的 1%。
vw 和 vh 是一個動態(tài)值槽驶，會隨著視口的大小變化而變化
