[Notes] CSS Cross-Country

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 (有些真的很強大 … )

以上,特別筆記一下!