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 這個工作,我們要再次強調,它根本就是一個

『坑』

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn