位置名稱與時間單位

除了常見的排版方式，部分的 CSS 樣式屬性也可以透過「位置名稱」進行特定位置的定位或對齊，也會利用「時間單位」設定動畫漸變的時間，這篇教學會介紹如何使用 CSS 的位置和時間單位。

快速導覽：

• 位置名稱
• 時間單位

位置名稱

CSS 有五個位置名稱，分別是「top、bottom、left、right 和 center」，要直接在 CSS 裡使用位置單位的機會並不多，下方列出使用位置名稱的樣式屬性：

文字水平對齊 text-align 與垂直對齊 vertical-align 也有使用到位置名稱，但還有其他對齊的屬性，會在其他教學篇幅介紹。

使用位置名稱時，主要按照下方規則套用樣式：

• 位置分成水平 ( left、right、center ) 和垂直 ( top、bottom ) 兩類，名稱中每一類只能使用「一種」名稱，例如可以使用 left top 或 top left，但不能使用 left right 或 top bottom。

• 所有預設的定位都在「左上角」，如果不做任何設定或使用數值定位，都會以 left 和 top 來定位。

• 如果單純使用「left top」，效果等同「0px 0px」或「left 0px top 0px」，如果使用「left 50px」效果等同「left 0px top 50px」*。

下方的範例中有三個 div，a 和 b 使用正確的位置名稱寫法，但 c 因為同時寫了 top 和 bottom 而發生錯誤，發生錯誤後就不會套用該樣式，直接使用預設值。

線上展示：https://codepen.io/oxxo/pen/gOJWoGm

<!-- HTML 程式碼 -->
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 200px;
    height: 200px;
    background-color: #fff;
    background-size: 50%;
    background-repeat: no-repeat;
    background-image: url("https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg");
    float: left;
    margin: 5px;
  }
  .a {
    background-position: top right;   /* 靠上靠右 */
  }
  .b {
    background-position: bottom 20px right 150px;  /* 靠下 20px，靠右 150px */
  }
  .c {
    background-position: top bottom;  /* 發生錯誤，使用預設靠上靠左 */
  }
</style>

時間單位

CSS 的時間單位主要應用於動畫或漸變轉場時間，有「s ( 秒 ) 和 ms ( 毫秒，1/1000 秒 )」兩個單位，如果是 0.X 的數值，可寫成「.Xs」，例如 0.5s 可以寫成「.5s」，下方是簡單應用時間單位的範例，滑鼠移動到不同的 div 上方時，會有不同時間的轉場效果。

線上展示：https://codepen.io/oxxo/pen/bGyWJoo

<!-- HTML 程式碼 -->
<div class="a">0.5s</div>
<div class="b">1s</div>
<div class="c">2s</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width:100px;
    height:50px;
    margin:5px;
  }
  div:hover {
    width:200px;
  }
  .a {
    transition: .5s;  /* 漸變時間 0.5 秒 */
  }
  .b {
    transition: 1s;   /* 漸變時間 1 秒 */
  }
  .c {
    transition: 2s;   /* 漸變時間 2 秒 */
  }
</style>

小結

雖然 CSS 的位置名稱和時間單位不常用到，但如果要使用到一些進階功能或效果，也是不得不學的基本知識，幸好這些為名稱和時間單位並不複雜，相信看完這篇教學應該就能順利掌握到使用方法囉～

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～