天天看點

前端常用重難點總結之css篇

今天天氣不錯,心情也一掃陰霾,人生的路,有的時候越走越窄,有的時候越走越多,但是,每一次選擇,便注定意味着無數的錯過,我們應該珍惜每一場相逢,把握好每一個機會,不向命運低頭。

廢話不多說,css篇參上。

css篇

<1>基礎

1、選擇器概念的了解以及css規則命名慣例
2、三種機制=>繼承、層疊、特指
3、了解什麼是上下文選擇符
4、盒子模型、定位、浮動與清除
5、樣式權重計算:計算特指度的方法=>ICE原則(即多種組合時權重分析id>class>元素)
6、正常開發最開始會有個base.css(也可為其他名字)的公共樣式,可在裡面寫一些去除預設html效果的樣式。
7、實際應用中css路徑的改變經常得更改相應的圖檔路徑。

<2>css3

1、幾種布局類型對比:彈性布局(非常重要)VS栅格布局VS流式布局VS固定布局
2、活用calc可解決大部分問題,結合max-width,min-width更佳。
3、px、em、rem、vw、vh、vm、%等機關可靈活切換應用
4、css作用域scope可用于限定css的作用範圍
5、媒體查詢media,用于檢測裝置類型及螢幕大小等
6、僞類(UI僞類、結構化僞類)、僞元素。看似沒多大作用的僞類僞元素深入學習後就會發現有很大妙用,以前寫很多代碼才能實作的效果都可以更簡單實作。
7、動畫Animation和Transition過渡。新增的動畫Animation和過渡Transition功能跟僞類僞元素一樣省下了寫一大堆代碼的時間,甚至都不用寫js也有很酷炫的效果。

<3>更進一步
純css3在動态計算方面有點不足,這個時候這兩貨就派上用場了
1、less
2、sass(scss)