在做手機端的時候經常會用到的做字型的尺寸單位
說白了 em就相當於「倍」，比如設定當前的div的字型大小為1.5em，則當前的div的字型大小為：當前div繼承的字型大小*1.5
但是當div進行巢狀的時候，em始終是按照當前div繼承的字型大小來縮放，參照後面的例子。
這裡的r就是root的意思，意思是相對於根節點來進行縮放，當有巢狀關係的時候，巢狀關係的元素的字型大小始終按照根節點的字型大小進行縮放。
參照後面給的demo
vh就是當前螢幕可見高度的1%，也就是說
height:100vh == height:100%;
但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，
但是設定height:100vh，該元素會被撐開螢幕高度一致。
vw就是當前螢幕寬度的1%
補充一句，當設定width:100%，被設定元素的寬度是按照父元素的寬度來設定，
但是100vw是相對於螢幕可見寬度來設定的，所以會出現50vw 比50%大的情況。
lang
="zh-cn"
>
>
charset
="utf-8"
>
>
恭賀新春title
>
head
>
type
="text/css"
media
="screen"
>
html
.em,
.em > .em-son,
.em > .em-son > .em-grandson
.rem,
.rem > .rem-son,
.rem > .rem-son > .rem-grandson
.rem-box
.vhvw-box
style
>
>
>
em 繼承父元素的字型大小，來變大或變小，多層巢狀字型變化h1
>
class
="em"
>
>
字型大小 1.2 * 14（父元素body） = 16px
br>
class
="em-son"
>
>
字型大小 1.2 * 16(父元素em) = 20px
br>
class
="em-grandson"
>
>
字型大小 1.2 * 20(父元素em-son) = 24px
br>
div>
div>
div>
>
>
rem 繼承根節點元素的字型大小，來變大或變小，多層巢狀字型不變化h1
>
class
="rem"
>
>
字型大小 1.2 * 14（根節點html） = 16pxbr
>
class
="rem-son"
>
>
字型大小 1.2 * 14（根節點html） = 16pxbr
>
class
="rem-grandson"
>
>
字型大小 1.2 * 14（根節點html） = 16pxbr
>
div>
div>
div>
>
>
rem 也可作為固定長度單位設定寬高等h1
>
class
="rem-box"
>
寬：14 * 10 = 140px
>
高：14 * 10 = 140px
div>
>
>
vh,vw 螢幕可見區域的高度，寬度的1%h1
>
class
="vhvw-box"
>
>
寬：螢幕寬度的50%br
>
>
高：螢幕高度的50%br
>
div>
body
>
html
>
前端開發中的單位
1.畫素 1 在前端開發中視口的水平方向和垂直方向都是由很多個小方格組成的，乙個小方格就是乙個畫素，例如div的尺寸是100 100，那麼水平方向就占用100個小方格，垂直方向也占用100個小方格 2 畫素的特點 畫素的大小不會隨著視口的變化而變化，畫素是乙個固定的單位 絕對單位 2.百分比 1 百...
前端常用單位
單位名稱為畫素，相對長度單位，畫素px是相對於顯示器螢幕解析度而言的。畫素的使用性特別廣。使用px定義文字，無論使用者怎麼設定，都不會改變大小。單位名稱為點 point 絕對長度單位。1pt 1 72英吋，常用於印刷當中，在ai ps等設計軟體當中字型大小所用的單位就是pt，它在廣告印刷業當中十分受...
前端中的幾個position
最近乙隻大四狗在準備面試，所以整理一波概念。static 無特殊定位，物件遵照html的定位規則 absolute 將 物件從文件流中拖出，使用 left right top bottom 等屬性，相對根元素進行絕對定位 其根元素可以自己設定，如果其父元素設定為relative,那麼根元素就是其父元...