做前端的應該對em不陌生，不是什麼罕見的單位，是相對單位，參考物是父元素的font-size，具有繼承的特點。如果字型大小是16px（瀏覽器的預設值），那麼 1em = 16px。
不過，這樣使用很複雜，很難很好的與px進行對應，因此，前端開發的前輩們總結了乙個經驗
body那麼，這樣之後 1em = 10px 在布局等使用的時候好換算了很多。
百分比相信大家更不會陌生了，百分比一般寬泛的講是相對于父元素，但是並不是十分準確。
1、對於普通定位元素就是我們理解的父元素viewport：可視視窗，也就是瀏覽器的window那麼大。2、對於position: absolute;的元素是相對於已定位的父元素（offset parent）
3、對於position: fixed;的元素是相對於 viewport
例外情況
1、使用了padding、margin 等，實際百分比和你想要的百分比是有區別的。（關於這個，解決方法之一，就是我們可以使用css3的calc()屬性，具體，您請繼續往下看，在文章最後我會解釋。）rem支援ie9及以上，意思是相對於根元素html（網頁），不會像em那樣，依賴於父元素的字型大小，而造成混亂。使用起來安全了很多。2、line-height百分比的一些情況，通常結果是百分比 計算後的值。（關於這個，您請繼續往下看。。。）
html body h1這樣整個網頁都會比較統一！不會造成混亂！
ie10＋ 和現代瀏覽器都支援這兩個單位。
vw viewport寬度，1vw等於viewport寬度的1%vw和vh會隨著viewport變化自動變化，再也不用js控制全屏了。vh viewport高度，1vh等於viewport高的的1%
甚至有些人喪心病狂的字型大小都用vw和vh控制，來達到字型和viewport大小同步的效果。
ie10+ 和現代瀏覽器都已經支援vmin
webkit瀏覽器之前不支援vmax，新版已經支援，所有現代瀏覽器已經支援，但是ie全部不支援vmax
vmin vw和vh中比較小的值這兩個屬性也會隨著viewport變化vmax vw和vh中比較大的值
ie9+ 和現代瀏覽器都已經支援,這兩個單位時根據當前font-family的相對單位。
ch 字元0的寬度如下圖：ex 小寫字元x的高度
當font-family改變的時候這兩個單位的值也會變化，不同字型表現的樣式不一樣。
上面我們已經提到了calc()，下面我們就具體說一說吧！
瀏覽器支援ie9+、ff4.0+、chrome19+、safari6+
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表示式來表示：
.haorooms這樣padding和margin和百分比一起用，問題就可以解決了。
例如，我們margin是20px。那麼我們就可以寫成
.haorooms也可以這麼用：
.boxline-height百分比在面試中可能經常問到。例如你知道line-height:120%和line-height:1.2的區別嗎？
現在就說一下行高帶單位和不帶單位的區別，例如下面的例子：
line-height:26px;帶單位的行高都有繼承性，其子元素繼承的是計算值，如父元素的字型大小為14px，定義行高line-height:2em;則計算值為 28px，不會因其子元素改變字型尺寸而改變行高。(例如：父元素14px，子元素12px,那麼行高就是28px，子元素雖然字型是12px，行高還是父元素的行高)/*表示行高為26個畫素
*/line-heigth:120%;
/*表示行高為當前字型大小的120%
*/line-height:2.6em;
/*表示行高為當前字型大小的2.6倍
*/
line-height:2.6;表示行高為當前字型大小的2.6倍不帶單位的行高是直接繼承，而不是計算值，如父元素字型尺寸為14px，行高line-height:2;子元素字型為12px，不需要再定義行高，他預設的行高為24px。（例如：子元素12px，他的行高是24px,不會繼承父元素的28px）
只是單純的文字描述，可能同學看了會很暈！不清楚是怎麼回事！下面我再補充一下案例吧！
大家把下面**copy到html中
<其中，乙個是有百分比的，乙個是沒有百分比的！預覽圖如下：style
>
.haorooms_bfb
.haorooms_nodw
.haorooms_children
style
>
<
div
class
="haorooms_bfb"
>
<
div
class
="haorooms_children"
>行高測試
div>
div>
<
br/><
br/>
<
div
class
="haorooms_nodw"
>
<
div
class
="haorooms_children"
>行高測試
div>
div>
如上圖，有百分比的haorooms_children 繼承了父級元素14*1.5=21px
沒有百分比，不帶單位的是自己的1.5倍，也就是26*1.5=39px;
一些layout會用到的
介質為fr4材料時 75 帶狀線，w h 8 50 帶狀線，w h 3 75 微帶線，w h 50 微帶線，w 2h。許多微控制器對電源雜訊很敏感,要給微控制器電源加濾波電路或穩壓器，以減小電源雜訊對微控制器的干擾。比如，可以利用磁珠和電容組成 形濾波電路，當然條件要求不高時也可用100 電阻代替磁...
WEB開發會用到的一些特效
今天我們想與大家分享一組創意的頁面切換熊效果集合。我們已經在示例中羅列了一組動畫，可以被應用到頁面切換過程中，創造出很有趣的導航效果。視差滾動 parallax scrolling 已經被廣泛應用於網頁設計中，這種技術能夠讓原本平面的網頁介面產生動感的立體效果。美女很養眼吧 以細微的過渡動畫顯示一些...
或許會用到的一些js函式整理
1.時間戳轉幾 月 周 天。前 function handledate datetimestamp var monthc diffvalue month var weekc diffvalue 7 day var dayc diffvalue day var hourc diffvalue hour...