前端工程師CSS自學寶典(二)-相對單位

前端工程師CSS自學寶典(二)-相對單位

前端工程師CSS自學寶典(二)-相對單位
前端工程師CSS自學寶典(二)-相對單位

在上一篇的前端工程師必備課程提到絕對單位,本篇則是以相對單位著手!

相對單位

em

前端工程師常用的em 是屬於相對單位,意思為每個子元素透過「倍數」乘以它的父元素 (上一層元素) 的值。如以下例子所示:在預設字體為 16px 的前題下,如果我們在CSS的每一層 div 區都設定為 1.5em,則第一層子元素就是 16px x 1.5 = 24px;第二層子元素就是上一層元素的 1.5 倍,為 24px x 1.5 = 36px;由此類推…到第五層就會是 16px x 1.5 x 1.5 x 1.5 x 1.5 x 1.5 = 121.5px。

See the Pen #demo-em by Tedutw (@Tedutw) on CodePen.

 

rem

rem 是相對單位,跟 em 的差別在於em 是每個元素乘以其上一層元素 (就是父元素) 的值;而 rem 為每個元素透過「倍數」乘以「根」元素 (就是它的「最」上層元素,通常都是靠CSS來改變預設大小) 的 px 值。如下例所示:若預設字體大小為 16px,假設每一層利用CSS碼來設定,div 都使用 1.5rem,無論是第一層子元素還是第五層的子元素,大小永遠是 16px x 1.5 = 24px。

See the Pen #demo-rem by Tedutw (@Tedutw) on CodePen.

 

%

% 是相對單位,跟 em 一樣都為每個元素乘以其上一層元素 (就是父元素) 的值,差別只是 em 是倍數單位;而 % 就是百分比單位。如在預設字體為 16px 的前題下,如果根據前端工程師建議在每一層 div 區都設定為 150%,則第一層子元素就是 16px x 150% = 24px;第二層子元素就是上一層元素的 150%,為 24px x 150% = 36px;由此類推…到第五層就會是 16px x 150% x 150% x 150% x 150% x 150% = 121.5px。

See the Pen #demo-% by Tedutw (@Tedutw) on CodePen.

 

larger / smaller

larger 和 smaller 就是以上一層 (父層) 的固定百分比為單位,larger 為父層的 120%,smaller 為父層的 80%。

See the Pen #demo-larger, smaller by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

推薦文章:

前端工程師CSS自學寶典(一)-絕對單位

 

CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!

 

那些前端工程師沒教你的CSS,今天一一告訴你!

 

美國NASDAQ上市公司、外商IT教育培訓企業

 

厭世代正風行?來上Java課程可以幫你扭轉困境!

 

網友看完這個網路行銷課程都給跪了

 

AI 人工智慧會做的事又多一樣!

 

 

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *