iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
1
自我挑戰組

從門外漢到前端新手系列 第 16

Day16 CSS基本樣式-單位與數值

單位

單位可以用在width(寬)、height(高)屬性上,也可以用在font-size(字體大小)上,我們在切版的時候,用什麼樣的單位來指定畫面上區塊、字體的長寬很重要,關乎到它們之間的相對關係,以及它們相對螢幕的關係。那就來介紹一下CSS的單位,px、em、rem、vw跟vh吧。

px

px(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;
}

em

em單位是相對單位,它的名字由來是一個英文字母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 (大家來猜猜看,圖片最後的寬是多少px?)

      .outer{
        font-size: 2em;
      }
    
      .middle {
        font-size: 1em;
      }
    
      .inner {
        font-size: 2em;
      }
    
      img {
        width: 5em;
      }
    
  • 渲染結果:

    • .outer是繼承<html>根元素的預設值16px,所以2em=32px。
    • .middle是繼承.outer,所以1em=32px。
    • .inner繼承.outer,所以2em=64px。
    • img繼承.inner,它的寬5em=320px。

rem

rem也是相對單位,其繼承的基準是<html>根元素。em通常繼承到很內層時,會比較難計算基準寬度已經變成多少 ; 但是rem的基準一直都是跟著根元素,相對單純很多。

  • 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

      .outer{
        font-size: 2rem;
      }
    
      .middle {
        font-size: 1rem;
      }
    
      .inner {
        font-size: 2rem;
      }
    
      img {
        display: block;
        width: 5rem;
      }
    
  • 渲染結果:數值不變,但從em變成rem大小就不一樣了。

    • .outer是繼承<html>根元素的預設值16px,所以2em=32px。
    • .middle是繼承<html>根元素,所以1em=16px。
    • .inner繼承<html>根元素,所以2em=32px。
    • img繼承<html>根元素,它的寬5em=80px。

  • em跟rem可以用小數點表示,如0.2em、0.3rem等。

vw與vh

vw跟vh也是相對單位,它們的v是viewport(視口),所以它是奠基在viewport寬度做百分比伸縮的單位。語法上省略%這個符號,數值後面直接接vw跟vh。

通常都會用到vw,vh比較少使用,因為視口的高度是變動的,我們瀏覽頁面的方向都是由上往下,內容也都是由上往下增生,高度在網頁通常是一個不確定的因素,所以很多基準都是用寬度來計算的。

如果我想要讓圖片寬度佔視口寬度的一半,那就是50vw。(body{ margin: 0;}樣式宣告是為了將寬度的變因歸零,它所宣告的行內式margin: 0的概念將會在之後解說。)

body {
  margin: 0;
}

img {
  width: 50vw;
}

渲染的成果,圖片會跟著視口的寬度改變自己的寬度。

動畫很不順,你們可以自己拉拉看XD~Try it on codepen.

數值

數值並沒有單位基準,數值只是一個數字來決定屬性值,或是一個數學符號來界定跟其他元素的數值關係。除了整數、小數點之外,今天我們要來介紹兩種CSS也常用到的數值:%、calc。

%百分比

%值是相對於某個數值的百分比,%的基準值為何,要看屬性的特性決定(比方width跟height的%基準是父層的width跟height ; 而例如line-height則是以元素本身的文字行高為基準)。%是生活中常用到的計算,大家應該都很熟悉。

  • 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>
    
  • css

      .outer{
        font-size: 100%;
      }
    
      .middle {
        font-size: 200%;
      }
    
      .inner {
        font-size: 50%;
      }
    
      img {
        display: block;
        width: 20%;
      }
    
  • 渲染結果

    • .outer是繼承<html>根元素的預設值16px,所以100%=16px。

    • .middle是繼承.outer,所以200%=32px。

    • .inner繼承.middle,所以50%=16px。

    • img 好奇怪,為什麼它繼承.inner,20%卻不等於3.2px呢?因為%並非單位,它不像rem或em是以預設字體為基準大小的單位,%是百分比,而圖片並不是字(text),所以它就不是去繼承.inner的字體大小的百分比,而是繼承了.inner這個容器寬度的百分比。
      <div>是block元素,它會自動佔滿從左到右的寬度,所以img的20%是<div>寬度的20%。當視口變小,<div>容器寬度變小,img也跟著縮小。

      Try it on codepen.

calc()計算值

calc()計算值可以在括號內寫算式,來指定數值,算術內的加減乘除符號是+-*/,我們可以把上述的單位跟百分比數值都用在計算值內。

  • 可以各種單位混在一起計算

    img {
        width: calc(100vw - 800px);
    }        
    

  • 也支援先加減後乘除的數學運算邏輯。(bodymargin:0將在之後解說 ; 而font-size:0是因為瀏覽器在讀html文檔時,元素會預設空字元。這邊兩行的歸零聲明,是為了把寬度的影響因素單純化。)

    body {
        margin: 0;
        font-size: 0;
    }
    
    .uniq {
        width: 200px;
    }
    
    .img_group {
        width: calc((100% - 200px)/5);
    }
    

單位與數值的筆記告一段落,有了顏色、單位跟數值的概念,下一篇就來認識字體跟一些基本的樣式屬性吧,明天見!/images/emoticon/emoticon41.gif

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。


上一篇
Day15 CSS基本樣式-color
下一篇
Day17 CSS基本樣式-文字樣式
系列文
從門外漢到前端新手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Chris
iT邦新手 4 級 ‧ 2019-10-12 14:37:05

% 的 100% 是誰並不一定是來自於被設定者所處的容器相對 CSS 屬性。
而是要看是什麼 CSS 屬性要設定 %
像是 line-height: 3%; 吃的是?由於 line-height 算是容器的設定屬性,那它的百分比指的是自己(自己就是容器)的 font-size 為基準。
是吧?

JinWen iT邦新手 5 級 ‧ 2019-10-12 15:57:14 檢舉

對,%的基準要看屬性,不一定是父層容器,感謝Chris指正,已修改~

我要留言

立即登入留言