HTML/CSS Part 3 摘要

參考講義部份:

• 顯示模式
• 定位模式與CSS Transform
• 動畫

這一部分主要是在學： 元素怎麼排、怎麼留空間、怎麼移動、怎麼變形、怎麼做動畫。

---

1. display

display 用來決定元素在畫面上的排列方式。

inline

元素會排在同一行，不會自己換行。

常見元素：

• span
• a

範例：

<p>
  今天有 <span>重要新聞</span>，請點這個
  <a href="#">連結</a>
</p>

說明： span 和 a 都會跟前後文字排在同一行。

---

block

元素會自己換行，通常一個元素佔一整行。

常見元素：

• div
• p
• h1

範例：

<div>第一塊內容</div>
<div>第二塊內容</div>

說明： 兩個 div 會上下排列。

---

inline-block

元素可以排在同一行，但又可以設定寬高。

範例：

<div class="tag">政治</div>
<div class="tag">國際</div>
<div class="tag">生活</div>

.tag {
  display: inline-block;
  width: 80px;
  padding: 8px;
  border: 1px solid #333;
}

說明： 這幾個區塊會排在同一行，而且每個都有固定寬度。

---

2. margin、padding、border

可以把元素想成一個盒子：

• padding：內容到邊框的距離
• border：邊框
• margin：元素和外面其他元素的距離

---

padding

範例：

<div class="box">這是一段文字</div>

.box {
  padding: 20px;
  border: 1px solid #333;
}

說明： 文字不會貼著邊框，四周會留出空間。

---

margin

範例：

<h2>標題</h2>
<p>第一段文字</p>
<p>第二段文字</p>

h2 {
  margin-bottom: 20px;
}

p {
  margin-top: 10px;
}

說明： 標題和段落、段落和段落之間可以拉開距離。

也可以分方向設定：

.box {
  margin-top: 20px;
  margin-left: 40px;
  margin-bottom: 10px;
  margin-right: 5px;
}

---

border

範例：

<div class="note">重點整理</div>

.note {
  border-width: 2px;
  border-style: solid;
  border-color: red;
  padding: 10px;
}

也可以簡寫成：

.note {
  border: 2px solid red;
}

---

3. position

position 用來控制元素的位置。

---

static

預設值。照正常排版。

範例：

<div>上面</div>
<div>下面</div>

說明： 如果沒有特別設定，元素就是正常上下排列。

---

relative

元素還在原本位置附近，但可以再做位移。

範例：

<div class="item">這是一個方塊</div>

.item {
  position: relative;
  top: 10px;
  left: 20px;
}

說明： 元素會從原本位置往下 10px、往右 20px。

---

absolute

元素脫離原本排版，直接放到指定位置。

範例：

<div class="card">
  <img src="photo.jpg">
  <div class="label">最新</div>
</div>

.card {
  position: relative;
  width: 300px;
}

.label {
  position: absolute;
  top: 10px;
  right: 10px;
  background: red;
  color: white;
  padding: 4px 8px;
}

說明： label 會被放到圖片右上角。

---

4. top、left

這些通常搭配 position 一起使用。

範例：

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

說明： 元素會放到上方 50px、左邊 100px 的位置。

---

5. transform

transform 用來做視覺上的移動、旋轉、縮放。

---

translate

平移。

範例：

<div class="move">移動一下</div>

.move {
  transform: translate(30px, 10px);
}

說明： 元素會往右 30px、往下 10px。

---

rotate

旋轉。

範例：

<div class="rotate">旋轉文字</div>

.rotate {
  transform: rotate(10deg);
}

說明： 元素會旋轉 10 度。

---

translate + rotate 一起用

範例：

.sticker {
  transform: translate(20px, 0) rotate(-8deg);
}

說明： 元素先移動，再旋轉。

---

6. transform-origin

transform-origin 用來設定變形的基準點。

範例：

<div class="hand">指針</div>

.hand {
  transform-origin: left center;
  transform: rotate(30deg);
}

說明： 元素會以左邊中央為支點旋轉。

如果不設，通常會以中心點旋轉。

---

7. animation

CSS 可以讓元素自己動起來。

---

@keyframes

範例：

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

說明： 元素會往上飄一點，再回到原位。

---

套用動畫

範例：

<div class="ball">●</div>

.ball {
  display: inline-block;
  animation: float 2s infinite;
}

說明： ball 會一直上下浮動。

---

旋轉動畫範例

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.icon {
  animation: spin 3s linear infinite;
}

說明： 元素會持續旋轉。

---

小整理

這一課的重點可以簡單記成：

• display：怎麼排
• margin / padding / border：怎麼留空間、畫邊框
• position：怎麼放位置
• transform：怎麼移動、旋轉
• animation：怎麼動起來