2015年2月2日 星期一

Front end 建議 CSS 知識

Front end 建議 CSS 知識

frontend 對於 css 要懂哪些,以下對於常用的開發項目列出一個列表,大家可以自己去找找答案,以及還沒有包涵在範圍內的部份。

對於大部分人,都會覺得 css 是一個很簡單的裝飾語法,也因為他沒有辦法進行邏輯判斷,沒有辦法進行程式計算(不加入 compass 的前提下)基本上他就是一個很簡單的語法,實際上在真正前端開發時,如果真的要強調於細節,強調於很多深入的部份,幾乎可以花去很大的功夫先從 html 特性,到 css 語法,甚至到如何命名等,都可以是一個很有趣的專題。

這邊先列出幾個對於一個前端工程師 front end engineer 需要了解的 css 項目,做介紹。

CSS

  • how import css style
  • css 權重, file, internal, important, inline attribute.
  • tag, id, class
  • box, inline mode
  • position, absolute, relative. 差異
  • float, clearfix
  • margin, padding 差異
  • width, height 計算方式
  • font style
  • image
  • background, and include background image
  • color, RGB, RGBA
  • font size
  • line-height
  • 基礎單位 px, em, %
  • opacity
  • z-index
  • 物件水平置中
  • media query

more CSS

  • 每一種 html tag 基本 display 屬性, span, div
  • other select, nth-child, * > , ^
  • :: pseudo, ex, ::hover, ::target
  • display, none, inline-block, table-cell …
  • parent and child relation, and position relative
  • css animation, transition
  • background image style
  • 物件垂直置中。
  • 混搭狀況下,權重覆蓋行為

more css 的部份,這邊大部分都是屬於更經驗談的部份,在實際開發中,有更多 css 的實際操作經驗,會讓自己省下許多事情,也讓自己能夠在提到某些問題的時候,可以自動腦補上去可能會發生的狀況。

這只是針對 css 的部份,事實上,還有更多更多關於 css 的問題,以及現在有

許多有趣的特效都可以利用 css 做到,對於 front end 這個工作,我們要再次強調,它根本就是一個

『坑』

沒有留言:

張貼留言

Facebook