位置名称与时间单位

除了常见的排版方式，部分的 CSS 样式属性也可以透过“位置名称”进行特定位置的定位或对齐，也会利用“时间单位”设定动画渐变的时间，这篇教学会介绍如何使用 CSS 的位置和时间单位。

快速导览：

• 位置名称
• 时间单位

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

位置名称

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 的位置名称和时间单位不常用到，但如果要使用到一些进阶功能或效果，也是不得不学的基本知识，幸好这些为名称和时间单位并不复杂，相信看完这篇教学应该就能顺利掌握到使用方法啰～

意见反馈