Day16 CSS基本樣式 | CSS rem
單位單位可以用在width(寬)、height(高)屬性上,也可以用在font-size(字體大小)上,我們在切版的時候,用什麼樣的單位來指定畫面上區塊、字體的長寬很重要,關乎到它們之間的相對關係,以及它們相對螢幕的關係。那就來介紹一下CSS的單位,px、em、rem、vw跟vh吧。pxpx(pixel:像素),是圖像元素,我們沒辦法具體化pixel的長寬值,它不像公分、公尺那樣是一個物理上的絕對單位,pixel的實際物理寬度是相對顯示器的解析度及螢幕寬度決定。但在CSS裡,我會當px是一個絕對的值,輸入16px,它就會是這個顯示器的16px寬度,不會因為...
單位單位可以用在width(寬)、height(高)屬性上,也可以用在font-size(字體大小)上,我們在切版的時候,用什麼樣的單位來指定畫面上區塊、字體的長寬很重要,關乎到它們之間的相對關係,以及它們相對螢幕的關係。那就來介紹一下CSS的單位,px、em、rem、vw跟vh吧。
pxpx(pixel:像素),是圖像元素,我們沒辦法具體化pixel的長寬值,它不像公分、公尺那樣是一個物理上的絕對單位,pixel的實際物理寬度是相對顯示器的解析度及螢幕寬度決定。但在CSS裡,我會當px是一個絕對的值,輸入16px,它就會是這個顯示器的16px寬度,不會因為瀏覽器視窗長寬改變,或是因為html的層級關係,而變換16px的寬高,16px就是16px,除非今天換了另一台顯示器,那就會有些微的差距。
.small { font-size: 16px; } .middle { font-size: 32px; } .big { font-size: 48px; } img { width: 300px; } emem單位是相對單位,它的名字由來是一個英文字母m的寬度,故叫em。它的繼承基準是父元素。通常瀏覽器的預設字體為16px,對應到<html>根元素的預設寬度,所以1em =16px ,而它的子元素相對值就依這個值繼承下去 ; 若把<html>的字體大小設定為32px,那它的子元素1em = 32px。
html:我們把元素一個一個包起來。
<div class="outer">I am a paragraph <div class="middle">I am a paragraph <div class="inner">I am a paragraph <img src="./image/pig.png"> </div> </div> </div>css (大家來...