學習目標：CSS 起手式、最常被問到的問題
寫 CSS 都會有一個起手式
reset.css
type 選擇器（h1~h6、p、li…）有些都會自帶樣式，而樣式在每個瀏覽器中的渲染方式又有不同， reset css 的能功能就是將樣式全部歸零。
可以自己寫 reset css ，也可以使用人家寫好的世界知名 CSS 大師「Eric A. Meyer」分享自己的 Reset CSS，使用起來我覺得沒有太大的問題，後來在網路上有找到別人分享的加強版，可以參考（我沒使用過）
[補充說明] 使用 bootstrap 的 css 需要再加上 reset.css 嗎？
不用，因為 bootstrap 的 css 是使用 normalize.cssnormalize.css
適用瀏覽器：Chrome, Edge, Firefox ESR+, IE 10+, Safari 8+, Opera
See the CHANGELOG因為使用 reset.css 有個問題是，每新一個專案都需要重新設定，有時候其實只是要小小修改時就變得有些麻煩，因此 normalize.css 就誕生了
Normalize.css 的 GitHub 中提出以下幾點說明功用：
- 保留瀏覽器有用的預設而非全部刪除
- 規範各種元素的樣式
- 修正常見的錯誤與瀏覽器不一致的問題
- 通過意為的修改來提高可用性
- 使用詳細的註釋說明代碼作用
reset.css 跟 normalize.css 我該用哪一個？
先說如果你已經用 bootstrap 就都不用在掛上這兩個 css。
reset.css 跟 normalize.css 沒有好與不好之分，應該依據專案情況使用，如果專案中有配合 UI 或已經有品牌 Guideline，或許使用 reset.css 會比較合適，因為 UI 會遵循 Guideline 或自己的設計，不一定會用瀏覽器的預設。而 normalize.css 常見的使用情境是，專案中有使用 rich-text editor (如 ckeditor等) 上稿的時候，如果沒有透過 normalize 來還原預設狀態，上稿人員可是會跳腳的，像是 「我的標題字級不對」、「超連結怎麼沒底線」之類的問題（轉 IT 邦幫忙文章：Day21：小事之 CSS Reset 與 CSS normalize 下方大神回覆 by Kuro Hsu）
讓寫 CSS 輕鬆起來
下這個標題的原因是，你「不一定要加」。寫 CSS 其實很看個人習慣，因此這邊只是提供我認為還不錯的起手式供參考
常被問到的問題
問題1. inline、block 跟 inline-block 的區別
block元素以區塊方式呈現，可設定寬高及上下距離。inline元素在同一行呈現，寬度不足時才換行，無法設定寬高及上下距離。inline-block元素在同一行呈現，寬度不足時才換行，但可以設定寬高及上下距離。
問題2. 什麼是盒模型（box modal）
打開開發者工具 computed 可以看到 box modal
主要的功能在於，清楚的看到目前所指的元素在瀏覽器中實際的 margin border padding 及 寬高，是很重要的 CSS 資訊，當使用 JavaScript 控制元素的尺寸時，就可以透過 box modal 確認是否正確。
我們通常會設定以下CSS 讓 border、padding 算在元素內
*, ::after, ::before { box-sizing: border-box;}
問題3. position: static, relative, absolute 跟 fixed 的差別是什麼？
static元素靜止不動的狀態，不會根據設定重新定位，是默認屬性。relative元素停留在原位置，但當設定 top left right bottom 時，會以原位置做基準重新定位。absolute元素會浮起，會往上找父元素是否非 static 做相對定位，若找到 body 都沒有就會以 body 做定位。fixed元素會浮起，以 viewport 做定位。
問題4. :hover, :before, :after
:hover偽類的一種，表示 mouseover 的狀態:before,:after偽元素的一種（HTML5支持）意思就是創造一個假元素，詳細可參考：[CSS]偽元素使用功略
問題5. :nth-child 的各種用法
:nth-child偽類的一種，以變數帶入來找到「當前元素」的兄弟元素，常見的用法有以下
.element:nth-child(4).element:nth-child(n).element:nth-child(3n+1).element:nth-child(3n).element:nth-child(odd).element:nth-child(even).element:nth-child(-n+3)
這邊要特別注意 n 是 0，假設第 n 個元素不包含 .element 的話則不會選到（先看順序再看 class）
可以利用這個小遊戲來練習選到元素：https://flukeout.github.io/
問題6. 垂直置中的方法
有神快拜！！！
問題7. 關於控制高度的單位 px % vh 我該用哪一個
先說明三種的差異
px：pixel 像素的縮寫，是網頁設計常用的基本單位，使用此單位會固定元素的高度%：百分比，以高度而言是相對於父元素vh：viewport 視口的縮寫，是相對視口（viewport）的高度而定的，使用此單位會直接抓取瀏覽器的高度作為依據
回到問題，該使用哪一個呢？
要用固定高就用 px，要層層抓取就用 %，想要直接相對瀏覽器 就用 vh
但，使用 vh 請要有心理準備
可能會因為不同型號版本、不同瀏覽器會需要用程式做調整，因為現在原生瀏覽器上，網址列會在網頁下滑時出現向上滑消失，下方也有浮動的 control bar 也是相同的原理，這代表
可視區域也會隨之改變
對於拿 vh 當長度單位來說是麻煩問題，這會導致元素高度高於可視區域，再怎麼滑也滑不出來
不過還是有解決方法的：The trick to viewport units on mobile
所以如果要開發 RWD 網站能儘早用實機 debug 就儘早使用。
以上有任何錯誤的地方歡迎指正，感謝。
