Image Credit

最近為了讓自己保持繼續學習的動機，所以就很衝動的花了 25 USD 買了一個月份的 Code School 資格，而首當其衝的課程就是身為 Front-End 不能不了解的 CSS。

雖然不是說完全不了解 CSS，但是我很想知道如果是付費教學的話，它會怎麼樣「教」CSS 這種很難以捉摸的東西？（你說 CSS 簡單它還真的可以很簡單，但是在這著重視覺特效還有正在經歷瀏覽器大戰的世界，CSS 還是真的可以他媽的難。）

最後証實沒有白花錢，因為這個教材也直接切入很多 CSS 技巧的核心，都是我在外面亂撞好幾十次得到的慘痛教訓，除此之外也有一些我沒有留意過的細節，看完整個教材加上 Challenge 的練習之後整個就是對 CSS 的掌握更多了一點，以下就是我由 Level 1 ~ Level 8 覺得很重要的筆記：

1. Non-Conflicting properties will be combined
   
2. 浮動的元素如果超過了 parent 的寬就會被擠到下一個「可能的」位置，這個時候如果元素之間的高度不同，就會影響被擺放的位置（可以想像一下 Pinterest 的 Layout ，他不是依照由左到右的順序擺放格子，而是會去尋找「上一層高度最小」的位置去插入來達到不規則的瀑布流，它的演算法下次再來開新文章分享。）
3. 同時有多個 float : left | right; 的元素「會依 DOM 的先後順序」來決定誰在最左或最右邊
4. 如果子元素有 float 的話，要記得在 parent 設定 clearfix （參考 Bootstrap 很有名的 clearfix 方法，我在面試 T 公司的時候就是用這個方法來解決 floating 的問題）
5. CSS 的 Specificity 計算（ 0, 0, 0, 0 → inline style, # of ID selectors, # of class selectors, # of element selectors ）
6. 不要用 !important 讓未來的自己後悔 …
7. Box Model 還有 width / height 的計算（因為和我們直覺想的完全不一樣，所以要留意。）
8. 父元素 postion : relative 搭配子元素 position : absolute 是一個超重要也常用的排版技巧
9. Z-index 要發揮效用的前提是該元素一定要被 positioned
10. CSS property shorthands
11. Block element / Inline element / Inline-Block element 的差異
12. 置中 Block element 的方法 – margin : 0 auto;
    
13. 置中 Inline / Inline-Block element 的方法 – text-align : center;
    
14. Collapsing margins
    
15. Content 用的 images 和 裝飾 Layout 用的 images 要用不同的形式呈現，前者建議是以 inline images 的形式，而後者建議是用 background images 的形式
16. Image Crop with overflow hack
17. 增加「說明用的文字」在要被 image 替換的元素上，利用 text-indent : -99999px 的 hack
18. CSS Sprites 好處：減少和 Server 的溝通次數、避免 :hover 等事件出現閃圖的情況
    
19. 善用 Pseudo Class （有些真的很強大 … ）

以上，特別筆記一下！