CSS筆記-常用的單位與定位
我們在設計網頁版面的時候會用到好幾種單位，這篇就彙整了css中常用的單位，同時也解惑了em與rem的差別，還有為什麼%有時候無法生效。
文字單位
在文字部分常用的有以下幾種
- px:絕對單位
我們常常聽到照片，螢幕解析度是多少px
因此可以把這個單位想像成現實中的公分或英吋，是不會隨著你的畫面尺寸有所改變的
如果想要元素精準的定位，用這個單位就不會有問題。
- em:相對單位,會受父元素影響(用父元素當成1來計算)
使用em的話，要注意如果你的父元素越來越多層，子元素可能會跑版或是無法達到你想要的效果。
- rem:相對單位,會受root設定影響(用root設定值當成1來計算)
rem跟em的差別
rem跟em的差異是參考的基準點不一樣
當我們有五個巢狀div結構，預設font-size:16px
每個div分別設置1.5倍的話
- 使用em：最內層會是16*[(1.5)的四次方]
- 使用rem：最內層是16*1.5
常用div, img單位
- vh,vw：視窗(可視區域)高度與寬度
- %：以目前元素為基準，如果沒有設置高度或寬度則無法生效
ref
https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/
https://www.oxxostudio.tw/articles/201809/css-font-size.html