# CSS 基本手冊

###### tags: `程式導師` `css`

完全跟著 [Amos 的金魚系列](https://ithelp.ithome.com.tw/users/20112550/ironman/2072)做的 CSS 筆記。

## CSS Reset
**為什麼需要 CSS Reset？**
因為各個不同的瀏覽器，自帶有不同的 CSS 預設樣式（外觀），所以在寫網頁前，需要先做 CSS Reset，確保掌握頁面中的各種元素樣式，不會被瀏覽器預設樣式打擾。

**如何使用 CSS Reset？**
1. 到 Meyerweb.com 大神的網站中，找到 [CSS Tool/ Css Reset](https://meyerweb.com/eric/tools/css/reset/)，複製裡面的 CSS 碼。
2. 在自己的網頁專案內，新建立一個 CSS 檔案 reset.css，並將複製的 CSS 貼上。
3. 在 html 檔案內引用 reset.css 即可重置整個頁面的 css 樣式。

**不讓 CSS Reset 太激進：CSS Normalize**
因為使用 CSS Reset 會讓整個網頁預設樣式歸零，因此所有的字體、行距、字距等都會是一樣的，沒有任何差別，但這在實作專案時，可能會遇到些小問題（這個可能要到實作後，才會遇到）。因此實作中，較常使用的是「CSS Normalize」，Normalize 的方法有很多套，[Normalize.css](https://necolas.github.io/normalize.css/) 是其中一套，端看公司內部是怎麼規定的。

#### 延伸閱讀
- [Day21：小事之 CSS Reset 與 CSS normalize](https://ithelp.ithome.com.tw/articles/10196528) by 小艾

## Box Model
預設情況下的物件總寬度是如何組成
- Total width = width + padding + margin + border
- 可見尺寸：border、border、padding


### 新盒子：box-sizing
Box-sizing 是用來指定 width 的劃定範圍
- `box-sizing: border-box` total width 的範圍是到兩邊的 border。
- `box-sizing: content-box` total width 的寬度只有物件的內容物。


## Display 排版
- inline-block
- Float vs Flex

在排版的時候，通常會在內容物外以一個 div，class name 是 wrap 或 container ，把內容包起來。

### inline-block
- block 會自己佔據整列空間，能設定高度，具備 block 性質的物件有
- `<div>`
- `<p>`
- `<h1>`
- `<ul>`
- `<li>`
- `<img>`
- inline 會跟大家排列在一起，不能設定高度，具備 inline 性質的物件有
- `<span>`
- inline-block 能跟大家排列在一起，能設定高度。
> 使用 inline-block 要注意「空白字問題」，會讓物件之間出現莫名的空白處，所以要搭配 `font-size: 0` 把物件間的空白處消除。

### Float
Float 屬於較資深的排版方法，新出的排版方式還有 Grid 或 Flex-box。
Float 的參數只有靠左（left）或靠右（right）。

如果 A 物件（子層）是撐開 B 物件（父層）的，當 A 物件設定成 float，代表撐開 B 物件的物件已不在，就會回到被撐開的狀態前。所以就需要多設定一個 div，利用 css 屬性 clear，讓父層能抓到子層的高度。

Q: `<em>` 跟 `<strong>` 的差別

### 😍 Flex
比 float 易用的排版方法，使用的時候要特別注意瀏覽器的版本，Microsoft 系版本的舊瀏覽器可能不支援 flex 排版方法。

**如何使用 flex？**
1. 用在內容的外層，用一個 div 包覆起來，通常這個 div 的 class name 會被命名為 wrap 或 container。
2. 設定 wrap 或 container div 為 `display: flex`。

**Flex 的效果**
- 會自動將 wrap 或 container div 內的物件分配寬度，讓物件等寬，且不會超出 div 寬度。
- 通常用來快速切出欄位。
- 如果要讓物件換行排列，就使用 `flex-wrap: wrap`。

#### 延伸閱讀
- [玩轉 CSS Flex](https://www.youtube.com/watch?v=_nCBQ6AIzDU) by CSSCoke Amos
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by CSS Tricks

## Position 定位
CSS 定位的意思是指，網頁中的**物件要依據「誰」**來對齊或選定位置？CSS 定位方式有五種，分別是
1. static
2. relative
3. Absolute
4. sticky
5. fixed

### `position: fixed`
- 使用這個定位方式的物件，會依據「瀏覽器視窗」來定位，物件會獨立成一塊，不會跟其他物件的版位推擠。
- 使用 fixed 的話，物件的 width 要設定成 100%，不然寬度會縮短。

**利用 `position: fixed` 垂直置中**

.object {
	position: fixed;
	top: 0;
	bottom: 0;
	margin: auto;
}

**利用 `position: fixed` 水平置中**
只比垂直置中的方式，多增加 left 跟 right 的參數設定而已。

.object {
	position: fixed;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	right: 0
}

### `position: relative`
相對定位，指的是物件會相對於自己在頁面中的「原位置」，在不影響其他物件的情況下，進行偏移。如果物件沒有偏移位置，就不會看見 `position: relative` 的效果，這也是常常覺得有 relative 但畫面沒差別的原因。

- 有設定 relative 定位的物件，會蓋住其他物件。
- 如果兩個物件都有設定 relative 定位，後出現的物件會蓋住前物件。
- 使用 z-index 可以改變物件所在的畫面層級。

> 補充：left, right, top, bottom, z-index，這些參數要在物件有設定 position 的情況下，才會發生作用。


### `position: absolute`
絕對定位，會根據最先碰到，且具備 fixed 或 relative 或 absolute 三者之一的 position 性質的父層，來對齊。

**特性**
- 會將有 absolute 的物件從資料頁面中抽掉（跟 fixed 物件被獨立出來的效果一樣）
- 如果父層物件都沒有具備 fixed、relative、absolute 三種 position 性質，物件會對視窗做定位，且只定位一次，當滾動視窗後，物件不會跟著調整位置。

## 動畫效果
- transition
- animation

### Transition
`transition: 屬性, 轉換時間, 延遲動畫執行的時間, 速度`
可製造出平順轉變的效果，且能寫入多組動畫組合：`transition: background-color, 2s; color, .3s`

### Animation
`animation: 動畫名稱, 執行時間, 延遲執行的時間, 速度, 次數, 方向, 填充模式, 播放狀態`

可自行調控的動畫細節比 transition 多，其中「延遲執行的時間」參數，指的是要讓物件等多久才開始執行動畫。

**如何使用 animation？**
1. 先設定關鍵影格 @keyframes
2. 再選角，選擇要讓哪個物件執行動畫關鍵影格

> 關鍵影格的概念，要想成是影片的時間軸，0% 代表在影片一開始，100% 代表在影片結尾。

@keyframes animate{
	0% { border-radius: 50%;}
	100% { border-radius: 0%;}
}

.object {
	animation: animate, 2s;
}

/*以上寫法就能讓 object 物件執行動畫*/

/*基本寫法*/
#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

## RWD
### Media Rule
為不同裝置應用不同的樣式，讓網頁透過偵測不同的螢幕寬度，顯示出對應的樣式。

**如何使用 media rule？**
1. 在 head 中插入 `<meta name="viewport" content="width-device-width, initial-scale=1.0, shrink-to-fit=no">`，viewport 的作用是指定視窗的縮放模式。
2. 在 css 樣式表中寫下 `@media screen and (條件) and (條件) { }`
- screen 是指定裝置為「螢幕」
- 條件可以有很多個

例如要表示當裝置是 screen，且螢幕大於等於 768px 的情況，通常大於等於 768px 言下之意就是，在電腦或平板的情況

@media screen and (min-width: 768px) {
	<在這情況要顯示的樣式>
}

#### 延伸閱讀
- [MDN CSS @media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)

## 超重要學習資源大全

[史上最完整的新手網頁入門學習地圖 - 金魚都懂的網頁學習路徑懶人包](https://ithelp.ithome.com.tw/articles/10228708)